I have a React stateless component using redux and hooks. I need to display the number of items on page load (useEffect) and update it every time I add or remove an item (store.subscribe)
useEffect(() => {
setState({
items: store.getState().items.length
});
}, []);
store.subscribe(() => {
setState({
items: store.getState().items.length
});
});
but this is causing the console to display the warning Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. .
How can I unsubscribe from inside useEffect?
This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. The instruction is pretty clear and straightforward, "cancel all subscriptions and asynchronous tasks in a useEffect cleanup function".
useEffect() hook runs the side-effect after initial rendering, and on later renderings only if the name value changes.
useEffect(()=>{ const sub = interval(10). subscribe(); function unsub(){ sub. unsubscribe(); } return unsub; });
Simply remove the <React. StrictMode> tags around the <App> tag, and this should disable strict mode for your app! You can also only include this tag in pages where you do want strict mode enabled, to opt-in on a page by page basis.
If you set the second parameter of useEffect call to [], the effect callback function would act as ComponentDidMount. If that callback function returns a function, this function will be called just before the component is unmounted(ComponentWillUnmount).
And I guess this setState should be replaced with setItems as below. Please try this code.
const [items, setItems] = useState([]);
useEffect(() => {
setItems(store.getState().items.length);
const unsubscribe = store.subscribe(() => {
setItems(store.getState().items.length);
});
return unsubscribe;
}, []);
Return a function from useEffect to do cleanup. So the returned function will be called when the component gets unmounted.
store.subscribe
return an unsubscribe function. Save its reference using useRef
hook and return the same reference from the useEffect
hook.
Read about it in the docs: https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup.
const storeRef = useRef(() => {});
useEffect(() => {
storeRef.current = store.subscribe(() => {
setState({
items: store.getState().items.length
});
});
return storeRef.current;
}, []);
useEffect(() => {
setState({
items: store.getState().items.length
});
return storeRef.current;
}, []);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With