0

<App> <Home> (props) <search> (API call is here) <Result> (pass the response data as props to render)

Data Flow :

search -> Home -> App -> Result

APP (HOME,RESULT) HOME (SEARCH)

using useEffect to again call API from but it renders 1st then call useEffect but data is not rendering.

Can any one explaing how to approach to resolve this issue ?

use useEffect to render but it's not working.

1 Answer 1

0

It would be helpful to write some code, simplified code, and even pseudocode to show the structure of what you are doing.


But - given what you wrote, I will try to answer more generally.

When you fetch data from somewhere, that data is then received by your app. It seems like you do this via useEffect.

USEEFFECT

useEffect can be run in these three ways depending on the dependency array you attach to it.

  • case 1/ every time a change is detected in the state of your page
  • case 2/ it can be run when your Page loads
  • case 3/ it can be run based on specific state variables
useEffect(()=> {}) // case 1 useEffect(()=> {}, []) // case 2 useEffect(()=> {}, [tacos]) // case 3 

Secondly, you can set the data from a local variable to something a little "more permanent" like a State variable:

const [tacos, useTacos] = useState([{name: 'fav taco'}]);

So if you are getting the data from useEffect you can save it into State.
BUT please be aware, if you set State with useEffect, then React will recognize that State changed, and then trigger a refresh, which will then trigger useEffect again (infinite loop).

This is a bigger topic but if you want to see how it's done using the empty dependency array [] (so only on startup) and setting a state setTacos(... you can look here, and I'm sure there are many answer on stackoverflow on setting State and useEffect.

Also, (I don't see your app/code right now in your question) you may want to consider doing this by button press by user; or a hybrid where one API call is made by useEffect on page load ([]) and then subsequent updated calls are called by a user clicking a button.

STORING STATE - SAVING TO A DATABASE

Now, we called the State variable "more permanent" ... I'm comparing this the the local variable you likely used to receive the result of your fetch like var response = await fetch(....

State variables are a good way to keep track of the state of a variable (so React can do things like refresh parts of a page when that state changes) and have it be passable to other pages and components of your app ... however it is not permanent in the sense that if you REFRESH the page on Chrome, those values will revert to default values.

So how to create a ephemeral state ... then you need to save it to a database of some sort. There are many choices you can choose here but supabase is one that is well documented and supported and uses a very solid, proven database tech postgreSQL.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.