use of setState in react.js

Question

I have a question regarding an anonymous function calling setState. I am trying to do a basic exercise (playground) where the number displayed on the button is increased when you click on it.

function Button() { const [state, setState] = useState(1); return <button onClick={() => setState(state+1)} >{state}</button>; } ReactDOM.render( <Button />, document.getElementById('mountNode'), );

I am confused why calling setState directly (instead of calling the anonymous function that calls the setState) does not work.

return <button onClick={setState(state+1)} >{state}</button>;

Mahaveer · Accepted Answer · 2020-12-13 08:25:58Z

onClick expects a callback function, i.e it expects a function declaration, which will be executed on click

The difference between onClick={()=> setState()} vs onClick={setState()} is that with the first one you're passing a function that, when executed will call setState but, with second you're passing what would be returned by calling setState

So, with onClick={setState()}, setState gets called immediately, which tells react to update the component, so react calls the render method again, and setState gets called again, which again tells react to update the component and so on... And react ends up in an infinite loop.

Omar K · Accepted Answer · 2020-12-13 08:04:46Z

On every render in this code return <button onClick={setState(state+1)} >{state}</button>; setState(state+1) will get called. This will cause react to crash.

You need to pass onClick a callback function () => setState(state + 1) so that the function is not called on every render.

msg45f · Accepted Answer · 2020-12-13 08:08:27Z

return <button onClick={setState(state+1)} >{state}</button>;

You aren't setting onClick to call setState here, you're setting onClick to the return value of the function call on setState (you are actually invoking the function, not assigning it). This is almost certainly not what you are wanting, and will result in React crashing due to the render process starting a state update which will result it in needing to rerender, causing a cycle of rerenders.

The anonymous function works because in that case you are assigning a function which will call setState, not the return value of setState.

kerem karadeniz · Accepted Answer · 2020-12-13 08:25:24Z

0

you should use it like this.

return <button onClick={setState(state+1)} >{state}</button>;

answered Dec 13, 2020 at 8:25

kerem karadeniz

1

1 Comment

Ran Marciano Over a year ago

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes

Stanislas Makengo · Accepted Answer · 2020-12-13 08:30:45Z

you can replace your code with this by adding React.StrictMode

import React, {useState } from 'react'; import ReactDOM from "react-dom"; export default function Button() { const [state, setState] = useState(1); return ( <div> <p>Vous avez cliqué {state} fois</p> <button onClick={() => setState(state + 1)}> {state} </button> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( <React.StrictMode> <Button /> </React.StrictMode>, rootElement );

Welcome to StackOverflow. Adding an explanation to your solution would help everyone to understand it.

Collectives™ on Stack Overflow

use of setState in react.js

5 Answers 5

Comments

Comments

Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

1 Comment

Related