How to reset and re-render components using react hooks

Question

I am new to React Hooks.

I have been working on re-rendering after the button is clicked.

From my example, there are two buttons. One is to increment the count and the other is to remove the content. When I click a remove button, the content becomes null in order to reset the count.

What I want to try is to display the new content with the new count which is zero when the render button is clicked.

However, the issue is when I click the render button, it shows nothing.

I believe that the reason is because I have set null to remove the content in my condition which is logically incorrect. I have looked at the other questions related to this problem, but I haven't found any proper way to solve it.

Can anybody help me to figure this out?

Based on the example linked above, you're never actually your render never changes in functionality, so you won't be able to render the data once it's been removed. You just need to update the render button's onClick to onClick={() => setRender(!render)}. — Ariel Salem
– Ariel Salem, Commented Apr 26, 2021 at 21:23

Drew Reese · Accepted Answer · 2021-04-26 22:25:52Z

3

What I want to try is to display the new content with the new count which is zero when the render button is clicked.

You can use a React key on an abstracted component that when updated, informs React that it's a "new" component and the old one should be unmounted and the new one mounted, essentially resetting it.

Example:

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

  return (
    <div>
      <h1>Hello CodeSandbox {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Use the toggling render state to toggle a new React key so Counter is remounted with initial state.

function App() {
  const [render, setRender] = useState(true);

  return (
    <div className="App">
      <Counter key={render} />
      <button onClick={() => setRender(!render)}>
        remove
      </button>
    </div>
  );
}

Demo

edited Apr 26, 2021 at 22:25

answered Apr 26, 2021 at 22:14

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wagner Paz · Accepted Answer · 2021-04-26 21:33:42Z

1

The state provenient from the useState hooks belong to the App component. What you're doing is conditionally rendering a part of this component based on your current App state. From what I get it you have to setCount(0) manually to have your state clean. It's not possible to deconstruct a component from the inside out. Using a useEffect you can check when the component is constructed and destructed.

useEffect(() => {
  console.log('constructed');
  return () => {
    console.log('destructed');
  }
}, []);

answered Apr 26, 2021 at 21:33

Wagner Paz

1911 gold badge2 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to reset and re-render components using react hooks

2 Answers 2

Demo

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related