I have a useEffect hook that is not updating after changing the dependency. The dependency is a state variable passed through props. Included below is what the code looks like:
const MyComponent = ({resource}) => {
// runs after changing resource state
console.log(resource)
useEffect(() => {
setLoading(true);
// doesnt run after changing resource state
console.log(resource)
setVariable(setDefaultValue());
}, [resource]);
}
MyComponent is being rendered for one of two states 'option1' or 'option2' the component renders differently depending on the state. I call the component like so:
const [resource, setResource] = useState('option1');
const handleChange = (e) => {
setResource(e.target.value);
};
return (
<MyComponent resource={resource} />
)
I don't understand why the useEffect isn't running after resource state is changed. The console.log on the outside of the useEffect show the change state, but the console.log inside of the useffect isn't run after changing state.
Oh, you can change code the following above try:
//Parent Component
const [resource, setResource] = useState('option1');
const [variable,setVariable] = useState();
const [loading,setLoading] = useState(false);
useEffech(()=>{
let fetch_api = true;
setLoading(true);
fetch(URL,options).then(res=>res.json())
.then(res=>{
if(fetch_api){
setVariable(setDefaultValue());
setLoading(false);
}
});
return ()=>{
//remove memory
fetch_api = false;
}
},[resource]);
const handleChange = (e) => {
setResource(e.target.value);
};
return (
<MyComponent variable={variable} />
)
//Child Component
const MyComponent=({variable})=>{
return <>
</>
}