Why doesn't useEffect run when sorting gets changed? I only want it to run when sorting.options get adjusted, but for some reason, when I add options to sorting.options the useEffect won't run happen; however, when I only have "sorting" it works perfectly even though only options get changed in handleChange? I dont want to have only sorting in there because I don't want the useEffect to run when sorting.value gets changed, for example.

const handleChange=index=>event=>{
    let newOptions = sorting.options
    newOptions[index]["value"]=event.target.value
    setSorting((prevState)=>({
      ...prevState,
      options:newOptions
    }))
    console.log("sorting changed")
  }
  useEffect(()=>{
    console.log("Change happend")
  },[sorting.options])//This works perfectly fine when only sorting is there, but when i put in sorting.options nothing happens

CodePudding user response：

As Quentin said, try

let newOptions = sorting.options.slice(0)

To copy the options array instead of mutating it

CodePudding user response：

The problem is that you keep the reference of the original object throughout different render. Just replace by a copy

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

export default function Home() {
  const [sorting, setSorting] = useState({
    options: { 1: { value: 2 } },
    email: "[email protected]",
  });

  const handleChange = (index) => (event) => {
    let newOptions = sorting.options; // Here you are getting the reference of sorting.opions which is constant between renders
    // let newOptions = { ...sorting.options }; // Just replace previous line for a copy. 
    newOptions[index]["value"] = event.target.value; // Then you mutated the same object
    setSorting((prevState) => ({
      // setSorting creates a new object reference
      ...prevState,
      options: newOptions, // but options references never changed
    }));
  };

  useEffect(() => {
    console.log("Change happend", sorting);
  }, [sorting.options]);

  return (
    <div>
      Home <input onChange={handleChange(1)} />
    </div>
  );
}