Accessing context from useEffect
If your busyIndicator
is not changed during the life of the component, you could simply add it as a dependency to useEffect
:
const busyIndicator = useContext(GlobalBusyIndicatorContext);
useEffect(() => {
busyIndicator.show('Please wait...');
}, [busyIndicator]);
If busyIndicator
could be changed and you don't want to see an error, then you could use useRef
hook:
const busyIndicator = useRef(useContext(GlobalBusyIndicatorContext));
useEffect(() => {
busyIndicator.current.show('Please wait...');
}, []);
The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class. read more
No need to Wrap your useContext in useRef Hook. you can update your context data just call in useEffect Brackets like this.
const comingData = useContext(taskData);
useEffect(() => {
console.log("Hi useEffect");
}},[comingData]); //context data is updating here before render the component