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