Every time a React component mounts, updates or is unmounted, React executes two phases:
There is a cause-effect relation between these two. The render phase is a pure, side-effect free phase, in which React collects updates, or attempts to set state on components.
In the future you’ll be able to bail on render phases.
The commit phase is responsible for running side-effects, and committing changes to the DOM. After React commits to the DOM, the Browser’s job is to apply CSS styles, layout calculations, paint pixels and compose your elements into layers.
That’s a lot of work! …
There are two hooks which can help you stop unnecessary rendering of React Components. These are
In this post we understand what do they really do for us.
Returns a value.
This hook is all about optimizing each run inside a component. This is not a cache. React will clear it whenever it thinks is necessary, and calculate the value again. Hence, it should be a pure function, which depends on internals of your component.
Returns a function.
This hook is all about preventing new instances, as far as I understand it. …
Continuation from part 1.
In case you haven’t seen the what the oddity is about, here it goes:
>const arr = new Int32Array(10);
Int32Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
>arr = 43;
Int32Array [ 0, 43, 0, 0, 0, 0, 0, 0, 0, 0 ]
So far so good, we created a Typed-Array, and assigned 43 to the index 1. Before continuing the with the oddity, let’s see what happens if we assign a value to index out of bounds, say 11. …