Forem: Prabashwara Seneviratne

Is your React useState hook not updating state immediately? Here's how to fix it

Prabashwara Seneviratne — Wed, 04 Jan 2023 00:00:00 +0000

You are trying to update the state of your React app with the useState hook. You call the setState function with the new value but then when you try to use that state, you find that it hasn't updated yet! Here's a counter app with a similar problem. It should increase the count shown in the window and show a popup with the increased count. But the popup still has the old count value.

import { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(count + 1);
        alert('The count is ' + count);
    }

    return (
        <div>
            <h1>Counter</h1>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

Why is the state not updated?

When you tried to use state like this, you thought that setState works like a normal setter method.

const count = 0;

// What you think setState does under the hood
const setCount = (newCount) => {
  count = newCount;
}

const increment = () => {
  setCount(count + 1);
  alert('The count is ' + count);
}

But calling setState only sends a message to React to re-render the component with the new state value. React then waits until the function has finished running and re-renders the component by calling the component function with the new value being returned from the useState hook.

// What setState really does under the hood
// (Not really, but a simplified example)
const setCount = (newCount) => {
  React.stateUpdates.push('count', newCount);
}

const increment = () => {
  setCount(count + 1); // Only asks React to re-render the component with this new value.
  alert('The count is ' + count); // count will retain the old value until the next render.
}

How to correctly use the updated state value?

You can calculate the updated value within the function and use it.

const Counter = () => {
    ...
    const increment = () => {
        const newCount = count + 1;
        setCount(newCount);
        alert('The count is ' + newCount);
    }
    ...
}

What about using the useEffect hook to catch the updated value?

You could also catch the updated value in the next render by using the useEffect hook

import { useEffect } from 'react'

const Counter = () => {
    ...
    const increment = () => {
        const newCount = count + 1;
        setCount(newCount);
    }

    useEffect(() => {
      if (count > 0) {
        alert('The count is ' + newCount);
      }
    }, [count])
    ...
}

But I don't recommend this approach as it leads to code that is harder to understand and more prone to bugs. It is a better practice to run side effects (in this case, showing the popup) within event handlers whenever possible as shown in the previous code snippet.

Why multiple calls to set state with the React useState hook don't work

Prabashwara Seneviratne — Wed, 04 Jan 2023 00:00:00 +0000

You are making multiple calls to setState from React's useState hook. Perhaps you want to add multiple items into an array that is in that state variable. But only one item is added! Here's a list component with the same problem.

import { useEffect, useState } from 'react';

const List = () => {
    const [list, setList] = useState([]);

    useEffect(() => {
        setList([...list, 'Item 1']);
        setList([...list, 'Item 2']);
        setList([...list, 'Item 3']);
    }, []);

    return (
        <div>
            <h1>List</h1>
            {list.map((item, index) => (
                <p key={index}>{item}</p>
            ))}
        </div>
    )
}

export default List;

Why does this happen?

Like I've explained in this post, calling setState does not update the state immediately. It only asks React to do it in the future. So in this case, list keeps referring to the default empty list since React hasn't re-rendered the component yet.

const List = () => {
    ...
    useEffect(() => {
        setList([...list, 'Item 1']); // list = [], setList(['Item 1'])
        setList([...list, 'Item 2']); // list = [], setList(['Item 2'])
        setList([...list, 'Item 3']); // list = [], setList(['Item 3'])
    }, []);
    ...
}

How to do multiple state updates in React?

Similar to the solution in this post, you can manage the new value separately and pass it into setState at the end.

const List = () => {
    ...
    useEffect(() => {
        const newList = [...list];
        newList.push('Item 1');
        newList.push('Item 2');
        newList.push('Item 3');
        setList(newList);
    }, []);
    ...
}

Notice that I am creating a new list with const newList = [...list] since React state changes have to be immutable. If you modify the existing list and pass it into setList, React will not update the state.

Alternatively, you can pass a function into setState. React will then call this function with the last value that was passed into setState and then use the value returned from it as the new value.

const List = () => {
    ...
    useEffect(() => {
        setList(list => [...list, 'Item 1']); // list = [], setList(['Item 1'])
        setList(list => [...list, 'Item 2']); // list = ['Item 1'], setList(['Item 1', 'Item 2'])
        setList(list => [...list, 'Item 3']); // list = ['Item 1', 'Item 2'], setList(['Item 1', 'Item 2', 'Item 3'])
    }, []);
    ...
}

It takes time

Prabashwara Seneviratne — Thu, 29 Dec 2022 00:00:00 +0000

It takes time to learn. It takes time to get good at what you learn.

It takes time to build. It takes time to make what you built great.

It takes time to setup processes. It takes time to setup standards.

You want it now. You feel like it should be now. You feel bad that it is not now. But it still takes time.

So give yourself some time.

Do you need to know Javascript to learn React?

Prabashwara Seneviratne — Tue, 27 Dec 2022 00:00:00 +0000

Learning frontend development can be overwhelming. There are a lot of things to learn and on top of that, you are not sure how much of each thing you should know. With most modern websites being built with frontend frameworks like React, you might be wondering whether you can skip learning Javascript and jump straight into React.

While you could jump straight into React without knowing Javascript, I don't recommend it. Javascript is still the only* programming language of the web and while it might seem like all these frontend frameworks have their own language, they only extend Javascript. So when using a Frontend framework like React, you still write Javascript while using the extra features that the framework provides. So if you jump into React without learning Javascript first, you will not be able to understand and use React effectively.

So the real question then is how much Javascript you need to know to learn React. Do you need to fully master it or is knowing the basics enough? While more Javascript you know the better, you definitely don't need to master every single Javascript concept before starting to learn React. You can find a more detailed list of what Javascript concepts would be the most useful here.

*WebAssembly is the other programming language of the web but it is designed to be used for computationally expensive tasks and it will not replace Javascript

How much Javascript do you need to know to learn React?

Prabashwara Seneviratne — Tue, 27 Dec 2022 00:00:00 +0000

You know that you need to know Javascript to use React. But how much Javascript should you know? Do you need to learn every concept and master it or can you learn a few basic concepts and then jump into React?

In the long term, the more Javascript you know the better. It is the primary programming language of the web and is crucial fundamental knowledge that will help you understand and use frontend frameworks and tools. Not having a good grasp of Javascript will constantly bother you as you struggle to understand why some code doesn't work.

But realistically, only a subset of Javascript concepts are commonly used with React. So knowing this subset should be sufficient for you to start learning React. If you are not comfortable with Javascript, you might have to go back to it repeatedly when you struggle with certain concepts.

So here are the Javascript concepts that you must know before learning React. This is not a complete list but it should give you a good idea of what you should know.

Concepts that you should definitely know before learning React

If you don't know the following concepts, you will really struggle to understand React.

Programming basics

Statements
Variables
Loops (e.g. while, for)
Mathematical (e.g. +, -) and logical operators (e.g. >, <, ===)
Conditional branching (e.g. if, ? operator)
Functions (including arrow functions)

Data structure basics

Strings and string methods (e.g. indexOf, slice, substr)
Objects and object methods (e.g. Object.keys, Object.entries)
Arrays and array methods (e.g. map, reduce, find, sort, push, unshift, includes)

Concepts that you need to know but could skip for a while

You might be able to start with React without these concepts but not knowing them will limit what you can do.

Promises and asynchronous programming (i.e. async / await)

Websites built with React usually need to download data from a server. The most basic way* to do this is with the Fetch API which uses Promises and so you need to know how to work with them. Other data fetching methods tend to be asynchronous as well.

Classes

Most React components created nowadays are Function components. But before React hooks were introduced, most components were Class components. While you could avoid writing Class components now with by using React hooks, older React codebases still have many Class components.

Newer Javascript syntactic sugar

Javascript is constantly evolving as a language with new concepts, operators and built in methods being added. There are several newer Javascript features that allow you to write code in a shorter, easier way. These features are commonly referred to as syntactic sugar and while you can achieve the same result without the older, basic syntax, they can make it a lot easier to write code. The following are the most useful for working with React.
- Destructuring assignment
- Optional chaining

*Perhaps the most basic way of doing data fetching is with the older XMLHttpRequest API but it is more cumbersome and the Fetch API is more commonly used

console.log printing twice in React? That is React StrictMode in action

Prabashwara Seneviratne — Tue, 13 Dec 2022 00:00:00 +0000

Despite all the tools we have for debugging frontend code, nothing beats a quick console.log to check the current state of the app. For years, I have temporarily stuffed console.log statements in all nooks and crannies within components and I was surprised when I did the same in a fresh CRA app recently and found it printed twice in the console.

const App = () => {
   console.log('render');
   return (
     <div className="App"> 
       ...
     </div>
   )
}

Historically, this meant that the component was being re-rendered. But in this case, I couldn't figure out why the component was re-rendering since the state was not changing. After some digging, I found out that this "double console.log" was due to React StrictMode.

Quick intro to React StrictMode

Over the last few years, React has been moving towards Interruptible rendering which allows the rendering to be paused or changed after it has begun and Concurrency to handle multiple state updates at the same time. In order to enable these features, React components must be idempotent meaning that they must return the same output all the time given then same input. Historically, React components were not encouraged to be idempotent with lifecycle functions like componentWillMount and componentWillReceiveProps encouraging us to write logic that should only run sometimes (Usually on the first render). So any components with this "unsafe" behavior must be refactored to be idempotent in order for them to be used in newer versions of React with concurrency enabled.

With React 18, the concurrent features were enabled with the new createRoot entrypoint and CRA changed its template to use the createRoot entrypoint and use React StrictMode.

...
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
       <App />
    </React.StrictMode>
);

StrictMode is designed to show issues with components that will make them unusable with concurrent React. When enabled, it prints warnings about the usage of deprecated React features and modifies the behavior of React in development mode so that any issues with components become more visible. One such behavior change is that several functions and methods (e.g. Class component constructor + render, function component bodies) are invoked twice This explains why the console.log statement was printing twice!

How to get console.log to print only once again?

The easy fix is to disable React StrictMode by removing the component wrapper. But this would leave us blind to potential issues in the components we create.

The proper fix is to install the React developer tools browser extension which marks the double invoked console.log in a lighter color.