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

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…


In case you didn’t know, browsers support an API called AbortController, which is typically used to cancel ongoing fetch requests. More info always available at MDN.

An example using React’s useEffect.

Step by Step

Normally you fetch data and when it resolves you set some state with the response. However, there’s two situations to consider:

The latter can happen for example if you are fetching friends of a user Joe, but Joe has too many friends so the request is slow. Before the request for Joe‘s friends resolves, you decide you…


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.

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.

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…


Did you know that iOS devices with touch screen, do not trigger body element click events?

That’s right, it is a design choice made by Apple, and while it may seem harmless it could easily lead you into trouble. See this example, or this one here.

In this post I make a Modal, assuming that attaching a listener on the body for clicks will be enough to close the Modal. One can absolutely make a better portal that will not have this problem.

The point here is to trigger it and then solve it, without modifying the portal.

Credit to Paul Zoetemeijer on Unsplash

The setup

Let’s say…


Recently I came across the following video. Needless to say, as a JavaScript advocate, I felt I had to understand every little quirk demonstrated.

Let’s do this!

“Learning together to be better developers!” by rawpixel on Unsplash

JavaScript can’t handle numbers?

Right off the bat, the speaker hits us with a stone. JavaScript can’t be consistent with numbers. It can handle 10 or 15, but it can’t stay consistent when a 0 is prefixed. What is going on?

$ node
>10
10
>15
15
>015
13

This one is quite simple.

In JavaScript octal number syntax uses leading zeroes, with a gotcha:

>0777 // Is taken as octal
481
>0999 // Is not taken as…

Arrays in JavaScript include the method reduce, a powerful functional programming tool.

Photo by Adi Goldstein on Unsplash

Often one is introduced to the reduce method by calculating the sum of all elements in an array, like so:

const sum = arr => arr.reduce((acc, val) => acc + val, 0);

That is probably the worst way to show the power of reduce, and most people dismiss it over other jewels such as map or filter, or rather use libraries such as lodash, underscore, ramdajs, to get some utility functions, when in fact the number of things you can do with reduce is up to your own…


React-Media allows developers to manage responsive content using functional style. The to-go strategy to write code in React.

Photo by Goran Ivos on Unsplash

React-Media is made by the creators of react-router and it is a neat, lightweight library. To use React-Media, you simply do the following:

However, you’d hardly ever use this pattern. You’d want to inject props to your responsive content, even if you are using Redux. In that case, you can do this:

And now you’r good to go. But, could this be cleaner? And what about testing?To achieve cleaner code we do the following:

Joseph Chamochumbi

Señor Developer. I do full-stack with JS & TS. Currently mastering Rust.

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