Every time a React component mounts, updates or is unmounted, React executes two phases:

  • A render phase
  • A commit phase
Image for post
Image for post
Photo by Med Badr Chemmaoui on Unsplash

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 useMemo and useCallback.

In this post we understand what do they really do for us.

Image for post
Image for post
Photo by Wim van 't Einde on Unsplash

useMemo

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.

useCallback

Returns a function.

This hook is all about preventing new instances, as far as I understand it. …


Continuation from part 1.

The next JavaScript oddity in the video actually took me a while to nail and pushed me to review the ECMAScript specification and get clear on the concepts of CanonicalNumericIndexString, exotic indexing and abstract operations.

Image for post
Image for post
Photo by Temple Cerulean on Unsplash

In case you haven’t seen the what the oddity is about, here it goes:

>const arr = new Int32Array(10);
undefined
>arr
Int32Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
>arr[1] = 43;
43
>arr
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. …

About

Joseph Chamochumbi

Front-end developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store