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.
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.
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 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
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…
Did you know that iOS devices with touch screen, do not trigger body element click events?
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.
Let’s do this!
This one is quite simple.
>0777 // Is taken as octal
>0999 // Is not taken as…
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.
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: