How to reset React Component State by itself

Vamshi Krishna — Thu, 12 Oct 2023 18:22:06 +0000

A react component state (defined by useState) remains unchanged during renders and is affected only when manually changed. One common way to reset the state is to manually modify them:

const Demo = () => {
  const [name, setName] = useState('default');
  const [address, setAddress] = useState(null);

  const reset = () => {
    setName('default');
    setAddress(null);
  }

  return (
    ...
    <button onClick={()=>reset()} >Reset</button>
  );
}

This is not ideal for three reasons:

The initial state is repeated and we may need to extract it to another variable to prevent bugs mismatch
Need to keep both in sync while updating
If the state is added from a custom hook, we have no way to reset it directly from the component

A better way is to reset by adding a special prop called key. It's well known we need to pass key while mapping list of components. But it can also be used to reset the component state. But this involves adding a new state to parent component just for resetting child component.

  const Demo = ({reset}: {reset:()=>void})=>{
    const [name, setName] = useState('default');
    const [address, setAddress] = useState(null);

    return (
      <button onClick={()=>reset()}>Reset</button>
    );
  }

  const Parent = ()=>{
    const [resetKey, setResetKey] = useState(0);

    return (
      ...
      <Demo key={resetKey} onReset={ ()=> setResetKey(resetKey+1)} />
    )
  }

What we are doing here is forcefully changing the value of prop key which resets the component state manually. Technically its not doing it by itself but taking parent component help, but this seems to be the cleanest way to reset.
This has the disadvantage of rerendering parent component and all its children. But since no other state is changed, ideally it should not be a big deal.

Codesandbox to play with :

Simplify reduce accumulator function code

Vamshi Krishna — Wed, 17 Jul 2019 01:38:21 +0000

Problem:

Consider a very simple reducer example : Find the sum of all elements in an array .

  const sum = [1, 2, 3, 4, 5].reduce((total, currentValue) => {
    total += currentValue;
    return total;
  }, 0);

  const obj = [['a', 4], ['b', 3], ['c', 6]].reduce(
    (accumulator, currentValue) => {
      accumulator[currentValue[0]] = currentValue[1];
      return accumulator;
    },
    {}
  );

(These are just simple example for easy explanation, there are simpler ways to write them, for ex: second one can be replaced by Object.fromEntries)

My code base almost always have single line function expressions except for the reduce function. I never liked it until I found a way to write it in single line

Solution 1: Spread operator

The second code snippet can be refactored using spread :

  const obj = [['a', 4], ['b', 3], ['c', 6]].reduce(
    (accumulator, currentValue) => ({
      ...accumulator,
      [currentValue[0]]: currentValue[1]
    }),
    {}
  );

But this might affect the performance, hence not suggested.

Solution 2 : Comma operator

I came across this wonderful comma operator while reading the blog The JavaScript Comma Operator by Angus Croll.

Comma operator can be used to write multiple expressions in single line. The above code snippets can be refactored to :

  const sum = [1, 2, 3, 4, 5].reduce(
    (total, currentValue) => ((total += currentValue), total),
    0
  );

  const obj = [['a', 4], ['b', 3], ['c', 6]].reduce(
    (accumulator, currentValue) => (
      (accumulator[currentValue[0]] = currentValue[1]), accumulator
    ),
    {}
  );

This works on the principle that (expr1 , expr2) evaluates each expression left to right and returns the last expression value.

P.S.: This is purely to demonstrate the beauty of comma operator and for aesthetic purposes only with no real value for performance (IMHO). In fact, the original code should be preferred as it is more readable

DEV Community: Vamshi Krishna

How to reset React Component State by itself

Simplify reduce accumulator function code

Problem:

Solution 1: Spread operator

Solution 2 : Comma operator