Welcome Guest ( Log In | Register )

Outline · [ Standard ] · Linear+

 help with react functional hooks

views
     
TSFLampard
post Dec 9 2022, 02:29 PM, updated 2y ago

On my way
****
Junior Member
577 posts

Joined: Jun 2008
i m currently working on an app where react functional component is being used

i need the fetches be do done SYNC and not ASYNC because custom hook 2 relies on custom hook 1

CODE

customhook1 = customhook1() //custom hook that should run first
[customhook2, fetchCustomHook2] = useCustomHook2() // custom hook that should wait for 1 to finish because it relies on it


customhook 1 does not alter any state, it only writes to global context

custom hook 2 relies data returned on 1 to run succesfully

so 2 needs to wait for 1 to run.

in class component this is easy, there is componentdidmount lifecycle to use, but i dont know how to do it in functional component.

when i try to add a callback to custom hook 1 it gives error, saying i can only run a custom hook inside react functional comp

and custom hook 1 doesnt alter any state so i cant use useeffect...

any ideas?

This post has been edited by FLampard: Dec 9 2022, 02:37 PM
cYus
post Dec 9 2022, 02:59 PM

Getting Started
**
Junior Member
85 posts

Joined: Apr 2013


it is generally not recommended to use synchronous requests in React because they can cause performance issues and make your application less responsive. Instead, you can use the useEffect hook to make asynchronous requests and control the order in which they are executed.

Here is an example of how you could use the useEffect hook to run your custom hook 1 and then your custom hook 2:

CODE
import React, { useState, useEffect } from 'react';

function MyComponent() {
 const [data1, setData1] = useState(null);
 const [data2, setData2] = useState(null);

 useEffect(() => {
   // Run custom hook 1 here
   customHook1();
 }, []);

 useEffect(() => {
   // Run custom hook 2 here, only after custom hook 1 has completed
   if (data1) {
     customHook2();
   }
 }, [data1]);




Here is an example of how you can make an asynchronous request using the useEffect hook:

CODE
import React, { useState, useEffect } from 'react';

function MyComponent() {
 const [data, setData] = useState(null);

 useEffect(() => {
   fetch('https://my-api.com/data')
     .then(response => response.json())
     .then(data => setData(data));
 }, []);

 return (
   // render your component here
 );
}


In the above example, the useEffect hook is used to make an asynchronous request to the https://my-api.com/data endpoint. The hook will only run when the component is first rendered, so the data will be loaded before the component is rendered.

If you want to use multiple custom hooks and ensure that one hook runs after the other, you can use the useEffect hook to control the order in which they are executed. For example, you could do something like this:

CODE
import React, { useState, useEffect } from 'react';

function MyComponent() {
 const [data1, setData1] = useState(null);
 const [data2, setData2] = useState(null);

 useEffect(() => {
   fetch('https://my-api.com/data1')
     .then(response => response.json())
     .then(data => setData1(data));
 }, []);

 useEffect(() => {
   if (data1) {
     fetch('https://my-api.com/data2')
       .then(response => response.json())
       .then(data => setData2(data));
   }
 }, [data1]);

 return (
   // render your component here
 );
}


In the above example, the useEffect hook is used to make two asynchronous requests. The first request is made when the component is first rendered, and the second request is made only after the first request has completed and data1 has been set. This ensures that the second request is only made after the first request has completed, and that data2 is only set after data1 has been set.

This post has been edited by cYus: Dec 9 2022, 03:00 PM
TSFLampard
post Dec 9 2022, 03:12 PM

On my way
****
Junior Member
577 posts

Joined: Jun 2008
QUOTE(cYus @ Dec 9 2022, 02:59 PM)
it is generally not recommended to use synchronous requests in React because they can cause performance issues and make your application less responsive. Instead, you can use the useEffect hook to make asynchronous requests and control the order in which they are executed.

Here is an example of how you could use the useEffect hook to run your custom hook 1 and then your custom hook 2:

CODE
import React, { useState, useEffect } from 'react';

function MyComponent() {
 const [data1, setData1] = useState(null);
 const [data2, setData2] = useState(null);

 useEffect(() => {
   // Run custom hook 1 here
   customHook1();
 }, []);

 useEffect(() => {
   // Run custom hook 2 here, only after custom hook 1 has completed
   if (data1) {
     customHook2();
   }
 }, [data1]);




Here is an example of how you can make an asynchronous request using the useEffect hook:

CODE
import React, { useState, useEffect } from 'react';

function MyComponent() {
 const [data, setData] = useState(null);

 useEffect(() => {
   fetch('https://my-api.com/data')
     .then(response => response.json())
     .then(data => setData(data));
 }, []);

 return (
   // render your component here
 );
}


In the above example, the useEffect hook is used to make an asynchronous request to the https://my-api.com/data endpoint. The hook will only run when the component is first rendered, so the data will be loaded before the component is rendered.

If you want to use multiple custom hooks and ensure that one hook runs after the other, you can use the useEffect hook to control the order in which they are executed. For example, you could do something like this:

CODE
import React, { useState, useEffect } from 'react';

function MyComponent() {
 const [data1, setData1] = useState(null);
 const [data2, setData2] = useState(null);

 useEffect(() => {
   fetch('https://my-api.com/data1')
     .then(response => response.json())
     .then(data => setData1(data));
 }, []);

 useEffect(() => {
   if (data1) {
     fetch('https://my-api.com/data2')
       .then(response => response.json())
       .then(data => setData2(data));
   }
 }, [data1]);

 return (
   // render your component here
 );
}


In the above example, the useEffect hook is used to make two asynchronous requests. The first request is made when the component is first rendered, and the second request is made only after the first request has completed and data1 has been set. This ensures that the second request is only made after the first request has completed, and that data2 is only set after data1 has been set.
*
noted rclxms.gif

 

Change to:
| Lo-Fi Version
0.0113sec    0.46    5 queries    GZIP Disabled
Time is now: 28th March 2024 - 10:26 PM