Run Async Code on Update of a State with React Hooks

Run Async Code on Update of a State with React Hooks

In class-based React components, we can pass a callback into the 2nd argument of setState to run code when a state is updated with setState. Run Async Code on Update of a State with React Hooks. We use state updater functions created with the useState hook to update states.

In class-based React components, we can pass a callback into the 2nd argument of setState to run code when a state is updated with setState .

With React hooks, we no longer have the setState method.

Instead, we use state updater functions created with the useState hook to update states.

This means we’ve to find new ways to run code after a state is updated.

In this article, we’ll look at how to run async code after a state is updated in function components created with React hooks.

useEffect Hook

The useEffect hook lets us commit side effects in our component code.

We can commit side effects in response to changes in one or more states.

To specify which state to watch, we pass an array of states we want to watch into the 2nd argument of useEffect .

Then in the useEffect callback we pass into the first argument, we can run code when the state in the 2nd argument changes since the callback in the first argument will be run when the state in the 2nd argument changes.

For instance, we can write:

import React, { useEffect, useState } from "react";

export default function App() {
  const [loading, setLoading] = useState(false);
  const [loading2, setLoading2] = useState(false);
  useEffect(() => {
    setTimeout(() => setLoading(true), 1000);
  }, []);
  useEffect(() => {
    if (loading) {
      setTimeout(() => setLoading2(true), 1000);
    }
  }, [loading]);
  return (
    <>
      <div>{loading.toString()}</div>
      <div>{loading2.toString()}</div>
    </>
  );
}

programming software-development javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Offshore Software Development - Best Practices

To make the most out of the benefits of offshore software development, you should understand the crucial factors that affect offshore development.

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

5 Core Criteria for Selecting Software Development Company - TopDevelopers.co

Check out these five criteria for the selection of your software vendor, and you will never regret having the wrong quality product made for you.

Best Software Development Company in Melbourne

Software Development Company in Sydney, Melbourne. Vrinsoft is Australia based Software Development Agency provides software solutions to increase your sales, reduce costs, and automates business processes with cost-effective, high-quality software development services.

JS Development Company India | JavaScript Development Services

Best JavaScript web app development company in India, PixelCrayons provides full stack JS development & maintenance. 16+ Yrs Exp., 60% less cost, Strict NDA