Performance

Image
Optimizing React with useMemo

useMemo is a React hook that memorizes the output of a function.

Read
Image
Understanding state scheduling and batching in React

We know how React manages state, or at least we have an idea, but there's one thing which is important: and that is how React handles state updates. In your code, you might have a component and in that component, you might manage some state with the help of the useState hook and therefore React manages that state for you.

Read
Image
A look behind the scenes of React and optimizations techniques

In React apps you work with components, typically with function components in modern React. Those components have one job in the end, and that is the JSX code, which they return. This tells React what the output of that component should be. Now in your React components, you can work with state, or with props, or with context, though props and context as I mentioned, all come down to state changes in the end, to make changes to a component and to make changes to the data that affect this component or that affects parts of your application.

Read
Image
React - useCallback() and its dependencies

It is very important to understand the useCallback() hook. useCallback() allows you to save a function so that you can reuse it. Now you had to specify this dependency array, and I don't know about you, but initially you might think, what do I need this for? My function has always the same logic across rerender cycles. Well, keep in mind that in JavaScript functions are closures, which means they close over the values that are available in their environment.

Read
Image
Preventing function re-creation in React with useCallback

We can make React Memo work for prop values that are objects as well. We just need to tweak the way we create and store those objects a little bit. There is an extra hook provided by React that helps us with that. And that is the useCallback hook.

Read
Image
Preventing unnecessary re-evaluation with React memo

It's needless to say that React is highly optimized. So, in a lot of apps and especially in bigger apps you still need to add some optimizations. And, therefore, you as a developer can tell React that it should only re-execute a component under certain circumstances. And those circumstances would be that the props, which the components receive, are changed for example.

Read
Image
How React really works

I really helps to understand how something works that you're using to ensure that you are using it correctly. So how does React work? Lets not forget that React is a JavaScript library for building user interfaces. React is all about components. We use components to build those user interfaces, and React embraces this component concept. It uses components to effectively compose user interfaces and it uses components to effectively update user interfaces.

Read