React: re-render even if there aren't changes in state

Question

Ok so I know the componet is rerendered when the state changes, but what if I want to reset the state. Take a look the following example:

const Parent = ({ type }) => {
  switch (type) {
    case "number":
      return <ShowNumber />;
    case "text":
      return <ShowText />;
    default:
      return <h1>nothing to do here</h1>;
  }
};

const ShowNumber = () => {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button
        onClick={() => {
          setNumber(prevNumber => prevNumber + 1);
        }}
      >
        Update number from child
      </button>
    </>
  );
};

const ShowText = () => {
  return <h1>{"Hello world"}</h1>;
};

export default () => {
  const [type, setStype] = useState("");

  return (
    <>
      <Parent type={type} />

      <button
        onClick={() => {
          setStype("number");
        }}
      >
        Show number
      </button>

      <button
        onClick={() => {
          setStype("text");
        }}
      >
        Show text
      </button>
    </>
  );
};

if I update my number and click on "Show text", then the ShowText component is called. Naturally if I go back to the ShowNumber component, my number is back to cero.

But what if I want to reset the number (or any other state related stuff) without switching (eg, every time I press the button "Show number" make my number go back to cero)

you'd add an onclick handler that setNumber(0) – Pavlos Karalis Jul 16 '20 at 04:29 — Pavlos Karalis, Jul 16 '20 at 04:29

score 2 · Accepted Answer · answered Jul 16 '20 at 05:16

You could achieve that, there are two things to do:

retriggering the state, by replacing setting value by setting object, so Parent component will also be rerender everytime you press the button
```
const [state, setState] = useState({});
...
setState({ type: "number" });
```
remounting expected component (i.e ShowNumber), by setting unique component key (reference answer for more detail)
```
return <ShowNumber key={`show-number-${new Date().getTime()}`} />;
```

I forked and modified with new sandbox:

EvanMorrison · Answer 2 · 2020-07-16T05:33:10.040

As it is now, clicking on "Show Number" a second time will not even cause a rerender of parent because the state doesn't change. To do what you want, you will need some additional state in Parent, like a counter that changes on every click. Then you can set that as a key on ShowNumber and a change in the key will cause a reset of state. Here's the updated code.

const Parent = ({ type, count }) => {
  switch (type) {
    case "number":
      return <ShowNumber key={count} />;
    case "text":
      return <ShowText key={count} />;
    default:
      return <h1>nothing to do here</h1>;
  }
};

const ShowNumber = () => {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button
        onClick={() => {
          setNumber(prevNumber => prevNumber + 1);
        }}
      >
        Update number from child
      </button>
    </>
  );
};

const ShowText = () => {
  return <h1>{"Hello world"}</h1>;
};

export default () => {
  const [type, setStype] = useState("");
  const [count, setCount] = useState(0);

  return (
    <>
      <Parent type={type} count={count} />

      <button
        onClick={() => {
          setCount(count => count + 1);
          setStype("number");
        }}
      >
        Show number
      </button>

      <button
        onClick={() => {
          setCount(count => count + 1);
          setStype("text");
        }}
      >
        Show text
      </button>
    </>
  );
};

score 1 · Answer 3 · answered Jul 16 '20 at 04:38

As mentioned in the comments you should just reset the state in a handler. Technically a re-render would not reset the state since a component re-renders each time state changes but that doesn't wipe it clean. What you are thinking about is unmounting and remounting the component which is happening when you refresh the page or navigate away and come back. The best solution for this is to set the state to the original values.

score 0 · Answer 4 · answered Jul 16 '20 at 04:37

0

In that case You have to reset your state to 0 .

You can do it by adding a function:

setNumber(0)

You can execute it when you click Show Text

answered Jul 16 '20 at 04:37

Arnab

936
7
13

React: re-render even if there aren't changes in state

4 Answers4