Nink at 01:41, 26 July 2023

2023-07-26T01:41:22Z

← Older revision		Revision as of 01:41, 26 July 2023
Line 45:		Line 45:
	The reason why the last index doesn’t clean up after finishing the effect is still unknown. It might happen because all the tasks are done, so there’s no need to clean up anymore. However, the cleanup function runs when a component unmounts and after each (re-)render. Therefore, the last index still needs the cleanup.		The reason why the last index doesn’t clean up after finishing the effect is still unknown. It might happen because all the tasks are done, so there’s no need to clean up anymore. However, the cleanup function runs when a component unmounts and after each (re-)render. Therefore, the last index still needs the cleanup.
	</p>		</p>
			<h2>Resources</h2>
			<ul>
			<li>https://retool.com/blog/the-react-lifecycle-methods-and-hooks-explained/</li>
			<li>https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm</li>
			<li>https://hackernoon.com/cleanup-functions-in-reacts-useeffect-hook-explained</li>
			<li>https://blog.bitsrc.io/everything-you-need-to-know-about-useeffects-clean-up-function-in-react-dfa6bc75f4f3</li>
			<li>https://dev.to/haseeb1009/avoid-ignoring-react-hooksexhaustive-deps-linting-warnings-244f#:~:text=It%20might%20not%20seem%20like,with%20given%20ways%20instead%20disabling.</li>
			</ul>

Nink: Created page with "

useEffect: Render Cycle and Cleanup Function

In the sitePageConfigOutput, there're two useEffects to be used which pulls two different response data from the backend.

   useEffect(() => {     // let cancel = false;     async function sendRequestA(objectFormConfigId) {       let responseDataA = await sendBackendRequestA(         "post",         "https://0yzv0v3f86.execute-api.us-west-2.amazonaws.com/Test/Email/List",         {           objectFormCon..."
2023-07-25T07:16:12Z
Created page with "<h1>useEffect: Render Cycle and Cleanup Function</h1> <p>In the sitePageConfigOutput, there're two useEffects to be used which pulls two different response data from the backend.</p> <code>   useEffect(() => {     // let cancel = false;     async function sendRequestA(objectFormConfigId) {       let responseDataA = await sendBackendRequestA(         "post",         "https://0yzv0v3f86.execute-api.us-west-2.amazonaws.com/Test/Email/List",         {           objectFormCon..."
New page
<h1>useEffect: Render Cycle and Cleanup Function</h1>

<p>In the sitePageConfigOutput, there're two useEffects to be used which pulls two different response data from the backend.</p>

<code>

  useEffect(() => {

    // let cancel = false;

    async function sendRequestA(objectFormConfigId) {

      let responseDataA = await sendBackendRequestA(

        "post",

        "https://0yzv0v3f86.execute-api.us-west-2.amazonaws.com/Test/Email/List",

        {

          objectFormConfigId: objectFormConfigId,

        }

      );

      cancel = false;

      if (cancel === false) {

        setObjectFormConfig((objectFormConfig) => {

          objectFormConfig.objectFormConfigId = responseDataA;

          return { ...objectFormConfig };

        });

      }

    }

    sendRequestA(getObjectFormConfig);

    return () => {

      cancel = true

    };

  }, [getObjectFormConfig]);

</code>

<h2>Problems</h2>

<ul>

<li>useEffect returns the clean up function before the effect</li>

<li>If condition renders only once instead of four times</li>

</ul>

<h2>Possible causes</h2>

<ul>

<li>Due to the async function, useEffect has to skip the async function and push it into the update queue, so there’ll be four sendRequestA in the queue waiting to be rendered. While waiting, useEffect will return the cleanup function.</li>

<li>useEffect remembers the last value, then renders the tasks in the queue. Therefore, for index 0 to 2, cancel will be set to true (due to the cleanup) and to false for the last index (3).

</li>

</ul>

<h2>Solution</h2>

<ul>

<li>Set cancel to false right before the if condition.</li>

</ul>

<h2>Note</h2>

<p>

The reason why the last index doesn’t clean up after finishing the effect is still unknown. It might happen because all the tasks are done, so there’s no need to clean up anymore. However, the cleanup function runs when a component unmounts and after each (re-)render. Therefore, the last index still needs the cleanup.

</p>

User talk:Nink - Revision history

Nink at 01:41, 26 July 2023

Nink: Created page with "

useEffect: Render Cycle and Cleanup Function