useEffect array dependency is called in every render when array is not changed

Question

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

export default function App() {
  const [columns, setColumns] = useState([
    { name: "a" },
    { name: "b" },
    { name: "c" }
  ]);
  const [isOpen, setIsOpen] = useState(false);

  const addName = () => setColumns([...columns, { name: "r" }]);
  const toggleOpen = () => setIsOpen(!isOpen);

  return (
    <>
      <List columns={columns} />
      <button onClick={toggleOpen}>Toggle</button>
      <button onClick={addName}>Add</button>
      <p>{isOpen.toString()}</p>
    </>
  );
}

const List = ({ columns }) => {
  const names = columns.map(col => col.name);
  useEffect(() => {
    console.log("Names is changed to: ", names);
  }, [names]);

  return <p>{names.join(" ")}</p>;
};

Names is changed to: is called, when isOpen state is changed in App component. I want the console.log to be executed only when names array is changed. I think in List component, it is creating a new array whenever render, so that the previous array and the new array are not equal.

Dennis Vash · Accepted Answer · 2020-05-16 15:36:23Z

5

You should memoize the component so it will render only on props change (or if comparison function passed as 2nd argument).

Currently, List rendered due to its parent App render.

const List = ({ columns }) => {
  const names = columns.map((col) => col.name);
  useEffect(() => {
    console.log("Names is changed to: ", names);
  }, [names]);

  return <p>{names.join(" ")}</p>;
};

const MemoList = React.memo(List);

export default function App() {
  return (
    <>
      <MemoList columns={columns} />
    </>
  );
}

See working example:

For class component, use React.PureComponent or implement shouldComponentUpdate.

edited May 16, 2020 at 15:36

answered May 16, 2020 at 15:30

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

3 Comments

Henok Tesfaye Over a year ago

Thanks, how about for class components?

Dennis Vash Over a year ago

React.PureComponent & shouldComponentUpdate

UjinT34 Over a year ago

React.memo will not help if List will utilize other props and/or state

UjinT34 · Accepted Answer · 2020-05-16 15:50:59Z

4

const names = columns.map(col => col.name);

Creates a new array every time and useEffect thinks that dependencies have changed.

To avoid that either pass names directly to useEffect:

  useEffect(() => {
    console.log("Names is changed to: ", names);
  }, names);

Or useMemo to get the same array object:

const names = useMemo(() => columns.map(
   col => col.name
), [columns]);

answered May 16, 2020 at 15:50

UjinT34

4,9971 gold badge14 silver badges28 bronze badges

2 Comments

Henok Tesfaye Over a year ago

thanks, what is the difference between passing a dependency in an array or directly passing the dependency?

UjinT34 Over a year ago

names is an array, so you pass it's content as dependency. If you pass [names] only the reference to the array is checked.

Collectives™ on Stack Overflow

useEffect array dependency is called in every render when array is not changed

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related