Bug: using useState without changing the state generate a useless rerender
See original GitHub issueWhen using useState in a component, this component will rerender twice, whereas nor the state nor the props did change.
React version: 16.13.1
Steps To Reproduce
- Create a dummy functionnal component
- Create a state with useState
Link to code example: codesandbox
import React from "react";
let count = 0;
const App = () => {
const [a] = React.useState("render");
count++;
console.log(a, count);
return <div>{count}</div>;
};
export default App;
The current behavior
Logs are: render 1 render 2
The expected behavior
render 1
Issue Analytics
- State:
- Created 3 years ago
- Comments:10 (1 by maintainers)
Top Results From Across the Web
Re-render React useState without updating the state
When I update person using a method from itself, it does not trigger a re-render on the person state. const carouselData = React.useMemo(()...
Read more >The noob's guide to useState - LogRocket Blog
Using React Hooks, like useState, allows you to ditch class-based components, but are you cultivating bad practice? Find out here.
Read more >Things to know about useState | TkDodo's blog
The useState updater only schedules an update. It basically tells React: Please set this value to the new value, somewhen.
Read more >A (Mostly) Complete Guide to React Rendering Behavior
This technique can be used to immediately force an update to a state value based on a prop change, without requiring a re-render...
Read more >Why Context Should Not be Used for State Management in ...
Let's start with the official Context overview from the React docs: Context allows you to transfer data down the component tree without manually ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Removing the component solves the problem too xD
I can confirm this is fixed in https://github.com/facebook/react/pull/18547 and the fix will be included in React 17. To be clear, the component will still run twice, but the
console.log
will be disabled on the second run.