question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug: using useState without changing the state generate a useless rerender

See original GitHub issue

When 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

  1. Create a dummy functionnal component
  2. 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:closed
  • Created 3 years ago
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
Sharcouxcommented, Apr 29, 2020

Same problem. When removing React.StrictMode it solves the problem

When removing useState and useEffect it solves the problem,too.

Removing the component solves the problem too xD

2reactions
rachelnaborscommented, Jul 9, 2020

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found