React's useCallback Hook can be used to optimize the rendering behavior of your React function components . We will go through an example component to illustrate the problem first, and then solve it with React's useCallback Hook . Keep in mind that most of the performance optimizations in React are premature. React is fast by default, so every…

React's memo API can be used to optimize the rendering behavior of your React function components . We will go through an example component to illustrate the problem first, and then solve it with React's memo API . Keep in mind that most of the performance optimizations in React are premature. React is fast by default, so every performance…

Today I came across a question in my Newsletter regarding computed properties in React. I didn't know about the term computed properties before, because such a term doesn't really exist in React, but it exists in other frameworks like Vue. Maybe I would call it computed values , computed state , or derived state (not from props though) in…

It doesn't happen often, but sometimes you have to update state from props in React. In this brief walkthrough, I want to show you a use case where you would want to derive state from props and how to do it for the initial props and updated props. Keep in mind that this concept should only be used rarely though, because often there is no need…

After learning how to pass props in React , the next thing you will learn is often state in React . Managing JavaScript primitives such as strings, booleans, and integers in React State are the basics for state management in React. But what about more complex data structures such as JavaScript arrays? There are many questions popping up for React…

Gatsby is an open-source framework based on React that helps build websites and apps. It allows you to build your website and apps using React and then generates HTML, CSS, and JS when you build for production. One of the many advantages of using Gatsby is that it allows accessing data through a query language called GraphQL. GraphQL is a query…

It's a common task in React to update an item in a list. Here I want to show you briefly how this works. Every time you want to modify something in React, for example a list where you want to change an item, you have to use React's state management . We will be using React's useState Hook here, for the sake of keeping the first example simple…

It's a common task in React to add an item to a list. Here I want to show you briefly how this works. Every time you want to modify something in React, for example a list where you want to add an item, you have to use React's state management . We will be using React's useState Hook, to keep this first example simple, however, you can also use…

It's a common task in React to remove an item from a list. Here I want to show you briefly how this works. Every time you want to modify something in React, for example a list where you want to remove an item, you have to use React's state management . We will be using React's useState Hook here, for the sake of keeping the first example simple…