State can hold any kind of JavaScript value, including objects. Although it may be tempting, you should never change objects you hold in React state directly. Instead, when you update an object, you need to create a new one and then set the state to use that copy. React Mutations…

If you program long enough, you will make the mistake of “premature optimization”. Premature optimization simply means you put the cart before the horse and made your application too complex. Redux is a framework where this happens quite frequently. The useReducer hook is a way to manage state in React….

In useEffect, the word “effect” refers to a functional programming term called a “side effect”. To really understand the concept of a side effect, we must first have a grasp of a pure function. React components are intended to be pure functions, meaning they receive a input and produce a…

When you want to persist values between renders, you use “a ref”. First, you must add the ref to your component by import useRef Hook from React: Call the useRef Hook and pass the initial value that you want to reference as the only argument. useRef returns an object that…

Explaining state is a very difficult concept simply because it is so broad. It is sometimes best to explain complicated things by explaining what they are NOT: State Is NOT: These items are not state because they don’t change from page to page and are static. State IS: These are…

Before components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes. Imagine that components are cools in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts…