React component rendering twice when using useState hook

Question

I haven't been able to understand why my App react component is rendering twice, as seen in the gif below.

I inserted a console.log just before returning the component to see how many times my component was rendering.

Whenever I remove the useState hook, my app renders just once as I suppose should be. Any guidance on why this is happening is welcome

import React, { useState, useEffect } from 'react';

const ListItem = ({ title, url, author, num_comments, points }) => {
  return (
    <div>
      <span>
        <a href={url} target='_blank' rel='noopener noreferrer'>
          {title}
        </a>{' '}
        by {author}
      </span>
      <br />
      <span>Comments: {num_comments}</span>
      <br />
      <span>Points: {points}</span>
      <hr />
    </div>
  );
};

const List = ({ list }) => {
  return list.map(({ objectID, ...item }) => (
    <ListItem key={objectID} {...item} />
  ));
};

const Search = ({ search, onSearch }) => {
  return (
    <div>
      <label htmlFor='search'>Search: </label>
      <input id='search' type='text' value={search} onChange={onSearch} />
      <p>
        Searching for <strong>{search}</strong>
      </p>
    </div>
  );
};

const App = () => {
  const stories = [
    {
      title: 'React',
      url: 'https://reactjs.org/',
      author: 'Jordan Walke',
      num_comments: 3,
      points: 4,
      objectID: 0,
    },
    {
      title: 'Redux',
      url: 'https://redux.js.org/',
      author: 'Dan Abramov, Andrew Clark',
      num_comments: 2,
      points: 5,
      objectID: 1,
    },
  ];

  const [search, setSearch] = useState(localStorage.getItem('search') || '');

  useEffect(() => {
    localStorage.setItem('search', search);
  }, [search]);

  const handleSearch = (event) => {
    setSearch(event.target.value);
  };

  console.log('rendered');

  return (
    <div className='App'>
      <h1>My Hacker Stories</h1>
      <Search search={search} onSearch={handleSearch} />
      <hr />
      <List
        list={stories.filter((story) =>
          story.title.toLowerCase().includes(search.toLowerCase())
        )}
      />
    </div>
  );
};

export default App;

try using Why did you render

rksh1997
– rksh1997

2020-04-20 17:22:47 +00:00
Commented Apr 20, 2020 at 17:22 — rksh1997
– rksh1997, Commented Apr 20, 2020 at 17:22

Pulkit Gupta · Accepted Answer · 2020-05-17 06:04:04Z

5

Even I was wondering why my controls are rendering twice.

I had no useEffect hook in most of my components and mostly I am just setting the state(immutably) as the user is entering data in input boxes. This is also happening in every component that has two why binding.

DevTools: I tried my app in a browser with no devtools installed and still the same issue.

React.StrictMode I think this is the potential culprit. When I removed this tag from index.js all the components start working correctly. I also read in the official documentation that the strictMode checks are executed only in dev mode and are ignored in production build.

This makes me think that our code is correct and we can ignore the re-rendering issue in dev.

answered May 17, 2020 at 6:04

Pulkit Gupta

1,0692 gold badges13 silver badges32 bronze badges

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

Comments

Jagrati · Accepted Answer · 2020-04-20 17:33:07Z

4

Check this out : https://github.com/facebook/react-devtools/issues/1297

The "unexpected re-render" isn't actually caused by useEffect specifically– but rather, it's the way DevTools "inspects" hooks values by re-rendering the function component in isolation.

While I understand that unexpected renders can indicate problems in some cases, this particular one shouldn't actually be a problem for several reasons:

The renders aren't recursive. (Child components aren't rendered.) The renders only happen for users with DevTools installed, and even then– only impact a single component (the one currently selected in the tree). The renders don't have side effects (e.g. the DOM won't be updated).

answered Apr 20, 2020 at 17:33

Jagrati

12.3k9 gold badges37 silver badges60 bronze badges

2 Comments

HMR Over a year ago

If you remove the strict mode it won't re render either, with or without dev tools.

Felipe Rueda Over a year ago

Yeah, that worked. Removing the <React.StrictMode> Comp fixed the double rendering.

denislexic · Accepted Answer · 2020-04-20 19:54:58Z

2

Your ‘setSearch’ is updating the vue for the input box, and then your ‘useEffect’ updates it again when search changes.

Remove the useEffect

Then

const handleSearch = (event) => {
    setSearch(event.target.value);
    localStorage.setItem('search', event.target.value)
  }

Here is a sandbox link: https://codesandbox.io/s/dawn-night-h2xiz?file=/src/App.js

It indeed doesn't fix it, but will probably avoid you some issues in the future.

The double render should only happen in development mode and not production. See Dan Abramov reponse here: https://github.com/facebook/react/issues/15074

edited Apr 20, 2020 at 19:54

answered Apr 20, 2020 at 17:23

denislexic

11.5k26 gold badges88 silver badges138 bronze badges

1 Comment

Felipe Rueda Over a year ago

If I remove the useEffect entirely, the component keeps rendering twice.

Raz Chiriac · Accepted Answer · 2020-04-20 17:29:45Z

0

I agree with @denislexic, here's one way to fix the issue.

Instead of

useEffect(() => {
  localStorage.setItem('search', search);
}, [search]);

const handleSearch = (event) => {
  setSearch(event.target.value);
};

Let's do the following:

const handleSearch = (event) => {
  const search = event.target.value;
  setSearch(search);
  localStorage.setItem('search', search);
};

This accomplishes the same 2 tasks (save to state, and to localStorage) in one routine instead of 2. Hint: useEffect causes a re-render

Hope that helps.

Cheers! 🍻

answered Apr 20, 2020 at 17:29

Raz Chiriac

4162 silver badges7 bronze badges

2 Comments

Felipe Rueda Over a year ago

Yeah, I tried that but didn't work. Even deleting the useEffect hook entirely from the application keeps rendering the component twice (or at least logging it twice).

Raz Chiriac Over a year ago

@FelipeRueda Here's a modification of your example code. Note: the use of useEffect is only to show you when the component renders. CodeSandbox It use memoization to avoid re-renders.

Collectives™ on Stack Overflow

React component rendering twice when using useState hook

4 Answers 4

Comments

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related