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

Question

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

Does this answer your question? [Component not re rendering when value from useContext is updated](https://stackoverflow.com/questions/57838862/component-not-re-rendering-when-value-from-usecontext-is-updated) — Dylan, Aug 06 '22 at 13:58
You have the same underlying problem though: you're mutating your context object but not *changing* it. You need to call `setPersonState` instead of directly mutating `personState`. Your useEffect won't re-trigger because `personState` is still the same object (reference) as before. — Dylan, Aug 06 '22 at 14:06
Does this answer your question? [Why can't I directly modify a component's state, really?](https://stackoverflow.com/questions/37755997/why-cant-i-directly-modify-a-components-state-really) — Yousaf, Aug 06 '22 at 14:07
[React Docs - Do Not Modify State Directly](https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly) — Yousaf, Aug 06 '22 at 14:08
@Yousaf - I think I was so focused on the context docs I'd forgotten about that. Thanks. — Kev, Aug 06 '22 at 14:20

score 4 · Answer 1 · answered Aug 06 '22 at 14:06

4

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)}
 }
};

answered Aug 06 '22 at 14:06

tpliakas

1,118
1
9
16

Thanks for the answer and +1, hackape just pipped you at the post with the mods to the `PersonProvider`. – Kev Aug 06 '22 at 14:51

score 1 · Accepted Answer · answered Aug 06 '22 at 14:06

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 }
      })
    }
  };
  
   ...
};

Just about to try this in my project (rather than a separate codepen)...if all good then I'll mark as accepted. — Kev, Aug 06 '22 at 14:22

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

2 Answers2