Breaking News: Grepper is joining You.com. Read the official announcement!

when to use previous state in useState

Add Answer

Dangerous Dog answered on October 22, 2020 Popularity 10/10 Helpfulness 2/10

answer when to use previous state in useState

related previous state in useEffect

related usestate previous state

related usestate access previous state

when to use previous state in useState

Comment

import React, { useState } from "react";
import ReactDOM from "react-dom";

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setTimeout(() => setCount(count + 1), 2000)}>
        Delayed Counter (basic)
      </button>
      <button onClick={() => setTimeout(() => setCount(x => x + 1), 2000)}>
        Delayed Counter (functional)
      </button>
      <button onClick={() => setCount(count + 1)}>Immediate Counter</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter />, rootElement);

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript state use-state when

Link to this answer
Share Copy Link

Contributed on Oct 22 2020

Dangerous Dog

0 Answers Avg Quality 2/10

Closely Related Answers

previous state in useEffect

Comment

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

const Component = (props) => {
    const {receiveAmount, sendAmount } = props
    const prevAmount = usePrevious({receiveAmount, sendAmount});
    useEffect(() => {
        if(prevAmount.receiveAmount !== receiveAmount) {

         // process here
        }
        if(prevAmount.sendAmount !== sendAmount) {

         // process here
        }
    }, [receiveAmount, sendAmount])
}

Popularity 10/10 Helpfulness 3/10 Language whatever

Source: stackoverflow.com

Tags: state stat

Link to this answer
Share Copy Link

Contributed on Apr 16 2021

Shy Seahorse

0 Answers Avg Quality 2/10

usestate previous state

Comment

const Foo = (props) => {
  const [name, updateName] = useState('Doe');

  return (
    <div>
      <div>{name}</div>
      <button
        onClick={() => updateName((prevState) => (
          `Old value was ${prevState}`
    	  )
        )}
      >
        Click me
      </button>
    </div>
    )
}


export default Foo;

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 19 2022

Thankful Turtle

0 Answers Avg Quality 2/10

usestate access previous state

Comment

const [arrayOfObjs, handleObjSelection] = useState([]);

// on a buttton for example
<button
  onClick={selectedObj => handleObjSelection(
              prevSelected => [...prevSelected, selectedObj],
  		  ))}
>

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Feb 19 2021

Thankful Turtle

0 Answers Avg Quality 2/10

when to use previous state in useState

Contents

More Related Answers

when to use previous state in useState

Closely Related Answers

previous state in useEffect

usestate previous state

usestate access previous state

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.