useEffect infinite loops when added a Dependency

Question

I've been doing a MERN stack edit page and unfortunately I run into infinite loop when I am including "fields" into my useEffect dependency and works perfectly fine when I removed it, but

React Hook useEffect has a missing dependency: 'fields'. Either include it or remove the dependency array.

shows when I remove it.

Heres my code:

 const EditFields = () => {
  const menu = useSelector((state) => state.menu.menu);
  const loading = useSelector((state) => state.loading.isLoading);
  const [fields, setFields] = useState({
    name: "",
    description: "",
    price: "",
 });

  useEffect(() => {
    if (menu) {
      setFields({
        ...fields,
        name: menu.name,
        description: menu.description,
        price: menu.price,
        dishImage: menu.dishImage,
        imgData: menu.dishImage,
      });
    }
  }, [menu,fields]);

  return (
    <>
      {!loading ? (
        <div className="add-menu">
          <p className="head">Add Menu</p>
          <form>
            <div className="add-fields">
              
              <div className="group-field">
                <label>*Menu Name</label>
                <input
                  type="text"
                  className="fileBtn"
                  placeholder="Menu Name"
                  value={fields.name}
                  onChange={(e) =>
                    setFields({ ...fields, name: e.target.value })
                  }
                  required
                />
              </div>
              <div className="group-field">
                <label>*Price</label>
                <input
                  type="number"
                  placeholder="Price"
                  value={fields.price}
                  onChange={(e) =>
                    setFields({ ...fields, price: e.target.value })
                  }
                  required
                />
              </div>
              <div className="group-field">
                <label>*Description</label>
                <textarea
                  cols="30"
                  rows="10"
                  placeholder="Menu Description"
                  value={fields.description}
                  onChange={(e) =>
                    setFields({ ...fields, description: e.target.value })
                  }
                  required
                ></textarea>
                <input type="submit" value="submit" />
              </div>
            </div>
          </form>
        </div>
      ) : (
        <h1>Loading...</h1>
      )}
    </>

Answer 1

In your case useEffect call every time when fields changed, but inside useEffect you change fields, therefore we get an endless loop. You can pass the function to setState the first argument of which will be the current state value.

useEffect(() => {
    if (menu) {
        setFields(prevFields => ({
            ...prevFields,
            name: menu.name,
            description: menu.description,
            price: menu.price,
            dishImage: menu.dishImage,
            imgData: menu.dishImage,
        }));
    }
}, [menu]);