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
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.
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.
- 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?
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.