Why Use Pure Functions in React Components?

In the world of JavaScript, some functions are known as pure functions. These are special because they adhere to two main principles:

1. Self-contained operations: Pure functions don’t interfere with or modify any objects or variables that existed before their invocation. This means they don’t produce any side effects in the rest of your code, keeping their operations clean and predictable.
2. Consistent results: A hallmark of pure functions is that they always return the same result when given the same inputs, no matter how many times or when you call them. This predictability is a huge asset in software development.

Embracing pure functions when writing your components can drastically reduce confusing bugs and erratic behaviors in your application as it grows.

This approach encourages clarity and maintainability―ensuring that each part of your application behaves as expected.

Impure Component

However, not all components are pure, and here’s what happens with an impure component:

App.js

let guest = 0;

function Peter() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Radioactive Spiders for guest #{guest}</h2>;
}
export default function PeterParker() {
  return (
    <>
      <Peter />
      <Peter />
      <Peter />
    </>
  );
}

Pure Component

Example of pure component by passing a prop instead of modifying a pre-existing variable:

App.js

function Peter({ guest }) {
  return <h2>Radioactive Spiders for guest #{guest}</h2>;
}

export default function PeterParker() {
  return (
    <>
      <Peter guest={1} />
      <Peter guest={2} />
      <Peter guest={3} />
    </>
  );
}

Using pure functions in your code isn’t just a best practice — it’s a strategy to make your codebase more robust and easier to manage. So next time you sit down to code, consider the purity of your functions and how they can simplify your application architecture!

Conclusion

Let’s conclude this by picturing the UI as a tree (after all, I’m a visual person and you may be too).

React also uses a tree to model the relationships between components and modules. This React render tree is the representation of the parent and child relationship between components:

Components located near the root of the tree are known as top-level components, while those without any children are called leaf components. This distinction helps in analyzing data flow and assessing rendering performance within the application.

Additionally, understanding how JavaScript modules relate to one another through a module dependency tree can provide valuable insights into your app’s structure. This model helps visualize the interdependencies between different modules.

Build tools commonly use a dependency tree to package all the necessary JavaScript code for the client to download and run. When the bundled size becomes too large, it can negatively affect the user experience in React applications.

By understanding the module dependency tree, you can more effectively troubleshoot and resolve such issues.

Reference: react.dev and my lecture notes 😝💋

---

• LinkedIn
• Bluesky
• Mastodon