Borak - software developer illustrational
Blog
25.4. 2021 / 04:40

javascript

front end

React

Common principles behind React.memo and memo hook

Memoization is powerful concept in programming theory. Memoization in React realm comes with the same principles backed by computer science. Let's see what they are.
According to Wikipedia:
In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

There are many articles about why to use each of these concepts. Let’s look at problem the other way around.

What the memoized entities have in common?

To use a memozation in meaningful way, the entity (function, component, method …) has to embody the following characteristics:

  • Referential trasnaparency is some way
  • Pureness from some meaningful perspective
  • Acceptably complex algorithm to check on the referential transparency

Referential transparency

Let’s let talk Wikipedia again:

Referential transparency and referential opacity are properties of parts of computer programs. An expression is called referentially transparent if it can be replaced with its corresponding value (and vice-versa) without changing the program's behavior.[1] This requires that the expression be pure, that is to say the expression value must be the same for the same inputs and its evaluation must have no side effects. An expression that is not referentially transparent is called referentially opaque.

Referential transparency for the React components

React component can be considered referentially transparent, when it causes no side effects. Meaning the output and behavior of the component can be determined by some algorithm imposed to its input properties.

This mostly means, the output of the component is dependent only on its properties. The component at the same time does no side effects. Meaning, for example

  • Operations on DOM beyond its common flow.
    • To be clear on this point – someone could think, the component actually does operations on DOM in the render method or return value (in the case of functional component). But that’s not accurate mental model. The component actually only returns some set of React elements (not even real DOM nodes). The operations with DOM happen during the commit phase and are handled by the Reacts rendering engine. So by DOM mutations, I mean actually accessing DOM by Javascript and making changes on these real DOM elements beyond the common flow.
  • Network requests
  • Calling callbacks passed as prop embodying non-deterministic behavior
  • And many more


Referential transparency for the React function / method

The principle here is the same as for component. All the examples, mentioned above hold true for the function too.
So, this is what the function and component have in common, when they are pure and referentially transparent.

How to decide whether to memoize function / method or Component


Once we are aware of the points mentioned above, the decision is not that difficult. We only need to analyze, whether the problem, we are facing is solvable on the level of component. Can we create component, which can be without side effects and referentially transparent? Or do we need to handle the functionality in component with complex non-deterministic operations and only should use caching on the level of the method / function?

To answer that, we should always ask these two questions adhering to the points mentioned above:

 
  • Can we make the component referentially transparent? Or do we need only inner function possessing this trait?
  • Is the algorithm for checking on the need for re-render (in the case of component) or the rerun (in the case of the function / method) efficient in a way, that will spare us complexity in the whole process of the lifecycle of the method / component / function?


Conclusion

Both React.memo and memo hook are standing on the same principles of referential transparency. To decide, which of these two tools to use, we need to define, whether the referential transparency is achievable on the level of component or the function / method.









More by Borak

To maximalize your user experience during visit to my page, I use cookies.More info
I understand

#BORAKlive

This page is subjected to the Creative Common Licence. Always cite the Author - Do not use the page's content on commercial basis. Comply with the licence 3.0 Czech Republic.
go to top