Why won't my useEffect() hook fire when updating a react context value?-CodePudding

Why won't my useEffect hook fire when updating a dependency that uses a React context? I'm using a context as part of a wizard that will collect a bunch of data from a user and then eventually process this on the last wizard step.

The Person fields are being updated and on the next page of the wizard I'm able to retrieve them (not shown in my example for brevity). However I want to make an API call in the useEffect to perform some processing after the user has entered their name and address.

This is the code (it's a bit contrived):

export interface Person {
  name: string;
  address: string;
  skills: string[]; // collected on a different wizard page
};

const PersonContext = React.createContext(null);

const PersonProvider: React.FC = ({children}) => {
  const [personState, setPersonState] = useState<Person>({
    name: "",
    address: ""
  });

  return ( 
    <PersonContext.Provider value={personState}>
      {children}
    </PersonContext.Provider>
  );
};

export const PersonPage: React.FC<{}> = () => {
  const personState = useContext(PersonContext);
  
  useEffect(() => {
    console.log("useEffect");
  }, [personState]);
  
  /*
  Also tried, but no joy:

  useEffect(() => {
    console.log("useEffect");
  }, [personState.name, personState.address]);
  */

  const onNameChanged = (e) => {
    if(event.key === "Enter") {
      console.log(`name: ${e.target.value}`);
      personState.name = e.target.value;
    }
  };
  
  const onAddressChanged = (e) => {
    if(event.key === "Enter") {
      console.log(`name: ${e.target.value}`);
      personState.address = e.target.value;
    }
  };
  
  return (
    <div>
      Name: <input name="name" onKeyDown={(e) => onNameChanged(e)} /> (press enter)
      <br />
      You typed: <span>{personState.name}</span>
      <br/>
      <br/>
      Address: <input name="address" onKeyDown={(e) => onAddressChanged(e)} /> (press enter)
      <br />
      You typed: <span>{personState.address}</span>
    </div>
  );
};

export const App: React.FC<{}> = () => {
  return (
    <PersonProvider>
      <PersonPage />
    </PersonProvider>
  );
}

I've also got a CodePen example here:

https://codepen.io/kevstercode/pen/gOexPea

CodePudding user response：

You're mutating the object. You should use the setState function to update it, eg.

instead of

const onAddressChanged = (e) => {
 if(event.key === "Enter") {
  personState.address = e.target.value;
 }
};

do this

const onAddressChanged = (e) => {
 if(event.key === "Enter") {
  setPersonState(prevState => {...prevState, address: e.target.value)}
 }
};

CodePudding user response：

const PersonProvider: React.FC = ({children}) => {
  // you should expose both the state object and its setter
  const personGetterSetter = useState<Person>({
    name: "",
    address: ""
  });

  return ( 
    <PersonContext.Provider value={personGetterSetter}>
      {children}
    </PersonContext.Provider>
  );
};

export const PersonPage: React.FC<{}> = () => {
  // unpack them here
  const [personState, setPersonState] = useContext(PersonContext);
  
  useEffect(() => {
    console.log("useEffect");
  }, [personState]);

  const onNameChanged = (e) => {
    if(event.key === "Enter") {
      console.log(`name: ${e.target.value}`);

      // Wrong way to go
      // do not mutate state object directly

      // personState.name = e.target.value;

      // use the setter, this is the react way to update state
      setPersonState(personState => {
        return { ...personState, name: e.target.value }
      })
    }
  };
  
   ...
};