Question 230385 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why useEffect's dependency array's variable's size has to be constant between renders?

I was changing a state between renders and logging that value on every time the state changes via useEffect. I noticed my console is showing this error bellow:
image of console showing the error.

I’m not understanding why is it that I’m getting this error. It would be very helpful if someone could explain why is my console showing this error.

Here’s the code if it helps:

import React, { useEffect, useState } from "react";
import Item from "./Item";
import { Item as ItemType } from "../types";

const Content: React.FC = () => {
  const [items, setItems] = useState<Array<ItemType>>([
    { id: 1, checked: false, item: "Banana" },
    { id: 2, checked: false, item: "Potato" },
    { id: 3, checked: false, item: "Charger" },
  ]);

  const onItemChecked = (id: number) => {
    const _items = items.map((item) =>
      item.id === id ? { ...item, checked: !item.checked } : item
    );
    setItems(_items);
  };

  const onItemDeleted = (id: number) => {
    const _items = items.filter((item) => item.id !== id);
    setItems(_items);
  };

  useEffect(() => {
    console.log(items);
  }, items);

  return (
    <main>
      <ul>
        {items.map((item) => (
          <Item
            item={item}
            key={item.id}
            onItemChecked={onItemChecked}
            onItemDeleted={onItemDeleted}
          />
        ))}
      </ul>
    </main>
  );
};

export default Content;
Tags:

3

Answers


  1. 0

    The useEffect dependency array requires stable values between renders. Changing the array’s reference triggers the effect. To log items when it changes, use an empty dependency array [] or compare the array contents using methods like JSON.stringify.

    useEffect(() => {
  console.log(items);
}, [JSON.stringify(items)]);

    if you want to include the items array in the dependency array and want the effect to run whenever the items array changes,

    useEffect(() => {
  console.log(items);
}, [items.join(',')]);
    Login or Signup to reply.
  2. 0

    Should be

    useEffect(() => {
    console.log(items);
  }, [items]);
    Login or Signup to reply.
  3. 0

    Could you update your code like below?
    Your way to use useState is not correct.

    import React, { useEffect, useState } from "react";
import Item from "./Item";
import { Item as ItemType } from "../types";

const Content: React.FC = () => {
  const [items, setItems] = useState<Array<ItemType>>([
    { id: 1, checked: false, item: "Banana" },
    { id: 2, checked: false, item: "Potato" },
    { id: 3, checked: false, item: "Charger" },
  ]);
  const onItemChecked = (id: number) => {
    setItems(_items => _items.map((item) =>
      item.id === id ? { ...item, checked: !item.checked } : item
    ));
  };
  const onItemDeleted = (id: number) => {
    setItems(_items => _items.filter((item) => item.id !== id));
  };
  useEffect(() => {
    console.log(items);
  }, [items]);
  return (
    <main>
      <ul>
      {items.map((item) => (
        <Item
          item={item}
          key={item.id}
          onItemChecked={onItemChecked}
          onItemDeleted={onItemDeleted}
        />
      ))}
    </ul>
  </main>
  );
};
export default Content;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search