Why only first time React function component getting props

user_10392934 0
Viewed 353

React throw an error when we try to update the state on an unmounted component.So When I test react component for that I am getting errors on the first render only.

I made a component that enable child component based on click. And child component have button which updates state after some settimeout which throw react warning

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.

Which is perfectly valid. But to overcome this I am passing enable props from the parent component based on that there is a condition just before setTimeout in the child component. So why does it throw an error the first time only?

To reproduce

Click on the child component button which is false and click on parent component button enable which unmount the child component.

**My question is why react throw an error on the first time only ? And why it is working fine on second time **

Parent component

import { useState } from "react";
import "./styles.css";
import { Test } from "./Test";

export default function App() {
  const [state, setstate] = useState(true);

  const changeState = () => {
    setstate(!state);
  };
  return (
    <div className="App">
      <button onClick={changeState}>enable </button>
      {state && <Test enable={state} />}
    </div>
  );
}

Child Component

import React, { useState } from "react";

export const Test = (props) => {
  const [state, setstate] = useState(false);

  const fetchData = () => {
    setstate(!state);
    if (props.enable) {
      setTimeout(() => {
        setstate(false);
      }, 1000);
    }
  };

  return (
    <>
      <button onClick={fetchData}> {`${state}`}</button>
    </>
  );
};

Codesandbox link to test

react-hooks reactjs frontend javascript
1 Answers

Nice track, Just you are missing a minor point, when you write a state thats needed some time to execute and the same time we can visit the flow again and again base on any action, then we need to clear old subscription before go to new one...

For example, in your code here, you update state flow, but the state flow is register a new subscription every time we visit a component with valid props and click on button, so that, prev execution may still work when you trigger new event, so simply, what we need to do unmounted old subscription and we can do that by this for your case:

import React, { useState, useEffect } from "react";

export const Test = (props) => {
  const [state, setstate] = useState(false);

  useEffect(() => {
    if (props.enable) {
      const timer = setTimeout(() => {
        setstate(false);
      }, 1000);

      return () => clearTimeout(timer);
    }
  }, [state, props.enable]);

  const fetchData = () => {
    setstate((prev) => !prev);
  };

  return (
    <>
      <button onClick={fetchData}> {`${state}`}</button>
    </>
  );
};

Look at code above, simply we add code need to cleanup in effect which its look to my state and prop, now when I click on button, the effect will trigger, if we do that again, the clearTime will work for prev subscription and then add new one and so on...

Notes:

  1. In your case we can remove function and use setState direct on your button.
  2. Prefer to use useCallBack in your function like const fetchData = useCAllback...
  3. You can use setstate((prev) => !prev); its will be work as snapshot, and its usefull when you depends on old value..but may it not needed in some cases too, but just to know about this feature.

Update 1:

What is Subscription:

You can say the subscription represents a disposable resource, such as the execution of an Observable. A Subscription has one important method, unsubscribe, that takes no argument and just disposes the resource held by the subscription, in another word, you can say yes, any async task or any job will be invoke to react life-cycle state and its needed to observe changes, then you talk about subscribe, like API or time out or time interval and so on, any of these action thats need to clear prev subscribe (stop observer - unsubscribe) to prevent any memory leek and clear memory to keep state flow safe and prevent unneeded reredner.

user_32881230
Related