React Hooks, How to update multiple states at once – EyeVision

code snippet

Use Temporal Value

import React, { useState } from 'react';

const func2 = (val) => {
  return 2 * val
}
function CalculateList(props) {
  
  const [count, setCount] = useState(props.num);
  const [count2, setCount2] = useState(func2(props.num));

  const processing = (num) => {
    const newval = count + num;
    setCount(newval);
    setCount2(func2(props.num));
  }

  return (
     <div className="lists">
       <h1>Add</h1>
       <button onClick={() => processing(1)}>+1</button>
       <h4>{ count }</h4>
       <h4>{ count2 }</h4>
     </div>
  );
}

export default CalculateList;

Use Functional Updates

import React, { useState } from 'react';

const func2 = (val) => {
  return 2 * val
}
function CalculateList(props) {
  
  const [count, setCount] = useState(props.num);
  const [count2, setCount2] = useState(func2(props.num));

  const processing = (num) => {
    setCount(val => {
      const newval = val + num;
      setCount2(func2(newval))
      return newval
    })
  }

  return (
     <div className="lists">
       <h1>Add</h1>
       <button onClick={() => processing(1)}>+1</button>
       <h4>{ count }</h4>
       <h4>{ count2 }</h4>
     </div>
  );
}

export default CalculateList;

Use useCallback

import React, { useState, useCallback } from 'react';

const func2 = (val) => {
  return 2 * val
}
function CalculateList(props) {
  
  const [count, setCount] = useState(props.num);
  const [count2, setCount2] = useState(func2(props.num));

  const processing = useCallback((num) => {
    setCount(val => {
      const newval = val + num;
      setCount2(func2(newval))
      return newval
    })
  }, 
  []
  );

  return (
     <div className="lists">
       <h1>Add</h1>
       <button onClick={() => processing(1)}>+1</button>
       <h4>{ count }</h4>
       <h4>{ count2 }</h4>
     </div>
  );
}

export default CalculateList;