state is not being updated when using React Hooks

Question

I am currently playing around with the new React Hooks feature, and I have run into an issue where the state of a functional component is not being updated even though I believe I am doing everything correctly, another pair of eyes on this test app would be much appreciated.

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

const TodoList = () => {
  let updatedList = useTodoListState({ 
    title: "task3", completed: false 
  });
const renderList = () => {
  return (
    <div>
      {
        updatedList.map((item) => {
          <React.Fragment key={item.title}>
            <p>{item.title}</p>
          </React.Fragment>
        })
      }
    </div>
  )
}
return renderList();
}

function useTodoListState(state) {
  const [list, updateList] = useState([
    { title: "task1", completed: false },
    { title: "task2", completed: false }
  ]);
  useEffect(() => {
    updateList([...list, state]);
  })
  return list;
}

export default TodoList;

updateList in useTodoListState's useEffect function should be updating the list variable to hold three pieces of data, however, that is not the case.

Adam · Accepted Answer · 2019-03-04 12:57:13Z

1

You have a few problems here:

In renderList you are misusing React.Fragment. It should be used to wrap multiple DOM nodes so that the component only returns a single node. You are wrapping individual paragraph elements each in their own Fragment.
Something needs to be returned on each iteration of a map. This means you need to use the return keyword. (See this question for more about arrow function syntax.)
Your code will update infinitely because useEffect is updating its own hook's state. To remedy this, you need to include an array as a second argument in useEffect that will tell React to only use that effect if the given array changes.

Here's what it should all look like (with some reformatting):

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

const TodoList = () => {
  let updatedList = useTodoListState({
    title: "task3", completed: false
  });

  return (
    <React.Fragment> // #1: use React.Fragment to wrap multiple nodes
      {
        updatedList.map((item) => {
          return <p key={item.title}>{item.title}</p> // #2: return keyword inside map with braces
        })
      }
    </React.Fragment>
  )
}

function useTodoListState(state) {
  const [list, updateList] = useState([
    { title: "task1", completed: false },
    { title: "task2", completed: false }
  ]);

  useEffect(() => {
    updateList([...list, state]);
  }, [...list]) // #3: include a second argument to limit the effect

  return list;
}

export default TodoList;

Edit:
Although I have tested that the above code works, it would ultimately be best to rework the structure to remove updateList from useEffect or implement another variable to control updating.

edited Mar 4, 2019 at 12:57

answered Mar 3, 2019 at 23:02

Adam

3,9651 gold badge25 silver badges32 bronze badges

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

8 Comments

lecstor Over a year ago

will using [...list] as second arg to useEffect have different behaviour to just using [list]?

Adam Over a year ago

@lecstor Yes. The second argument should contain any values from the outer scope that are used inside useEffect. Here, the list array is being spread, so the list array in the effect limiter needs to be spread as well.

lecstor Over a year ago

hmm.. It's more that useEffect will only run if any values in that array have changed (except the first time), so I don't see how there would be any difference. Unless of course you mutated the list, changing one of it's items without changing the actual list object which is not what updateList would do.

Adam Over a year ago

I agree with that, but when I tested this, the update ran infinitely without array spread.

lecstor Over a year ago

hmm.. I get

Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.

codesandbox.io/s/9lw4wo1jqr

|

Collectives™ on Stack Overflow

state is not being updated when using React Hooks

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related