I am having a weird issue inside useEffect() in my React component. I have to make 2 separate axios requests to get data when the page loads. I am trying to use a hook variable to see if the data objects are populated before passing them to the JSX. Here's my current configuration:
import React, { useState, useEffect } from 'react';
import Navbar from '../components/layout/Navbar';
import ContactsCard from '../components/layout/ContactsCard';
import EmailCard from '../components/layout/EmailCard';
import MeetingsCard from '../components/layout/MeetingsCard';
import { useParams } from "react-router-dom";
import config from './../config/config';
import axios from "axios";
function SummaryPageNew() {
let { selectName } = useParams();
const [contactData, setContactData] = useState();
const [meetingData, setMeetingData] = useState();
const [loadingData, setLoadingData] = useState(true);
//API calls
async function getContactData() {
axios
.get(config.apiURL + `/affiliations/name/${selectName}`)
.then((response) => {
return setContactData(response.data[0]);
});
}
async function getMeetingData() {
axios
.get(config.apiURL + `/meetings_attendees/name/${selectName}`)
.then((response) => {
return setMeetingData(response.data);
});
}
useEffect((loadingData) => {
getContactData();
getMeetingData();
setLoadingData(false);
if (loadingData) {
//if the result is not ready so you make the axios call
getContactData();
getMeetingData();
setLoadingData(false);
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
return (
<div>
<Navbar />
<div>
<div style={{ textAlign: "center" }}>
<h3>Contact Information</h3>
<h5>Profile: {selectName}</h5>
</div>
{loadingData ? (
<p>Loading Please wait...</p>
) : (
<div className="row">
<ContactsCard contactData={contactData} />
<EmailCard emailData={meetingData} />
<MeetingsCard meetingData={meetingData} />
</div>
)}
</div>
</div>
)
}
export default SummaryPageNew
I have tried moving the setLoadingData(false) method inside the axios calls. If I move it inside the getMeetingData() call. This works ... sometimes. Apparently, on some occasions, it loads first and then the contactData doesn't get returned. In the current configuration, the DOM renders with "Loading Please wait...". What am I doing wrong here? How can I resolve this issue?
There are many issues with your code.
useEffect functions don't take any parameters. Your declaration of loadingData as a parameter is covering the actual loadingData variable in your component, and React will not pass a value for this.
You're missing a dependency on loadingData in your call to useEffect. As is, the function will only execute once and then never again as long as the component stays mounted. So, loadingData never gets set to false. Generally, it is a bad idea to avoid warnings about useEffect dependencies unless you have a very good reason.
My recommended solution would be to avoid storing extra state for the "loading" status. Instead, I would just check whether the two state values have been populated yet, and show the "Loading..." text if either is not.
This leaves you with:
function SummaryPageNew() {
let { selectName } = useParams();
const [contactData, setContactData] = useState();
const [meetingData, setMeetingData] = useState();
const isReady = contactData !== undefined && meetingData !== undefined;
//API calls
async function getContactData() { ... }
async function getMeetingData() { ... }
useEffect((loadingData) => {
getContactData();
getMeetingData();
}, []);
return (
<div>
<Navbar />
<div>
<div style={{ textAlign: "center" }}>
<h3>Contact Information</h3>
<h5>Profile: {selectName}</h5>
</div>
{isReady ? (
<div className="row">
<ContactsCard contactData={contactData} />
<EmailCard emailData={meetingData} />
<MeetingsCard meetingData={meetingData} />
</div>
) : (
<p>Loading Please wait...</p>
)}
</div>
</div>
)
}
react-query is a very powerful library for fetching data asynchronously using hooks. This avoids having to manage complex state which can easily fall out of sync. However, I'd learn the fundamentals of react hooks first!
You're dealing with async function calls. Javascript doesn't wait for your async functions to complete before it continues with your program. This means your calls are probably still fetching, while you already set loadingData to false. You can fix this by using Promise.all to get a callback when the async functions resolve:
//API calls
async function getContactData() {
return axios
.get(config.apiURL + `/affiliations/name/${selectName}`)
.then((response) => {
return setContactData(response.data[0]);
});
}
async function getMeetingData() {
return axios
.get(config.apiURL + `/meetings_attendees/name/${selectName}`)
.then((response) => {
return setMeetingData(response.data);
});
}
useEffect(() => {
let mounted = true
return () => { mounted = false }
Promise.all([getContactData(), getMeetingData()]).then(() => {
if (mounted) setLoadingData(false)
})
}, []); // eslint-disable-line react-hooks/exhaustive-deps
Also note the let mounted = true I've added: you want to make sure this component still exists whenever your async calls complete. If the calls take a while, it's not unthinkable you might have navigated away, for instance.
Finally, it's not a wise idea to disable react-hooks/exhaustive-deps. With a few changes you can setup your code in such a way that this ignore is no longer needed.
React want you to provide getContactData, getMeetingData in the dependency array. You can fix that by moving the data fetching function outside of you component. This means they no longer have access to the selectName variable, but you can provide that variable as an argument:
function SummaryPageNew() {
let { selectName } = useParams();
const [contactData, setContactData] = useState();
const [meetingData, setMeetingData] = useState();
const [loadingData, setLoadingData] = useState(true);
//API calls
useEffect(() => {
let mounted = true
Promise.all([
getContactData({ selectName }),
getMeetingData({ selectName })
]).then(([contactData, meetingData]) => {
if (!mounted) return
setContactData(contactData)
setMeetingData(meetingData)
setLoadingData(false)
})
return () => { mounted = false }
}, [selectName]);
return () // Render your component
}
async function getContactData({ selectName }) {
return axios
.get(config.apiURL + `/affiliations/name/${selectName}`)
.then((response) => {
return setContactData(response.data[0]);
});
}
async function getMeetingData({ selectName }) {
return axios
.get(config.apiURL + `/meetings_attendees/name/${selectName}`)
.then((response) => {
return setMeetingData(response.data);
});
}
Related
I am attempting to render either an Application or Login page depending on whether getUser() returns a user object.
However, in both development and production, a blank page is rendered.
This is the code
export default function index() {
supabase.auth.getUser().then((response) => {
const userData = response.data.user;
console.log(userData);
return userData != undefined || userData != null ? (
<>
<Shell />
<AppView />
</>
) : (
<NoSessionWarn />
);
});
}
I use NextJS's router.push('/application') to route the user to this page, in case that might have something to do with it.
Any idea why this could be showing a blank page? I've tried taking the return block out of the .then() block and still nothing.
Few things:
In React functional components, side effects must be handled inside
a useEffect hook
React components names should be capitalized (Index instead of index in your case).
Most of the time it's a better idea to use strict equality operator since it also checks for the type of the operands.
As a suggestion, you could abstract the logic of the auth checking process into a custom hook. This not only increases the readability of the component, but also makes this logic reusable and you now would have separation of concerns. Your component doesn't know and doesn't care about how the user data is being retrieved, it just uses it.
Putting it all together:
useAuth custom hook:
export const useAuth = () => {
const [user, setUser] = useState(null)
const [isAuthorizing, setIsAuthorizing] = useState(true)
useEffect(() => {
supabase.auth
.getUser()
.then((response) => {
setUser(response.data.user)
})
.catch((err) => {
console.error(err)
})
.finally(() => {
setIsAuthorizing(false)
})
}, [])
return { user, isAuthorizing }
}
Component:
export default function Index() {
const { user, isAuthorizing } = useAuth()
if (isAuthorizing) return <p>Loading</p>
// Being very explicit here about the possible falsy values.
if (user === null || user === undefined) return <NoSessionWarn />
return (
<>
<Shell />
<AppView />
</>
)
}
You need to use the useState hook to re-render when you receive the data.
You need to use the useEffect hook with an empty dependency array to execute getUser() once on mount.
You'll also probably want a loading mechanism while the request is made.
export default function index() {
const [userData, setUserData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
supabase.auth.getUser().then((response) => {
setUserData(response.data.user);
setLoading(false);
});
}, []);
if (loading) return <p>Loading...</p>
if (!userData) return <NoSessionWarn />;
return (
<>
<Shell />
<AppView />
</>
);
}
Example: https://stackblitz.com/edit/react-ts-neq5rh?file=App.tsx
Iam newbie and now learning to make customize react hooks
here i am trying to call the function i made in app.js file, i want to use it onClick button. but fail to do so. please help me to find the error and understand it.
import React, {
useEffect,
useState
} from "react";
const useRandomJoke = () => {
const [jokes, setJokes] = useState();
useEffect(() => {
const jokeFetch = async() => {
await fetch("https://api.icndb.com/jokes/random")
//we'll run 2 "then"
.then(
// this will give us response and will return inform of res.json
(res) => res.json()
) //.json is a format
.then((data) => {
setJokes(data.value.joke);
}); // now calling data from te returned values in res.json
};
jokeFetch();
}, []);
return jokes;
};
export default useRandomJoke;
//With onClick function
function App() { const [jokes, setJokes] = useState();
return (
<div className="App">
<h1>Random Jokes</h1>
<p>{jokes}</p>
<button onClick={()=>{setJokes(useRandomJoke)}}>
Click for Jokes</button>
</div>
); } export default App;
`
useRandomJoke is a custom hook. Hooks should only be called at the top level of a component and as the custom hook already has the joke state, you don't need an additional state in the App component.
If you want to get a new joke after the component renders and every time the button gets clicked, you can do this:
const useRandomJoke = () => {
const [joke, setJoke] = useState("");
const fetchJoke = useCallback(() => {
fetch("https://api.icndb.com/jokes/random")
.then((res) => res.json())
.then((data) => {
setJoke(data.value.joke);
});
}, []);
return [joke, fetchJoke];
};
export default function App() {
const [joke, fetchJoke] = useRandomJoke();
useEffect(() => {
fetchJoke();
}, [fetchJoke]);
return (
<div className="App">
<h1>Random Jokes</h1>
<p>{joke}</p>
<button onClick={fetchJoke}>Click for a random joke</button>
</div>
);
}
You can't conditionally call React hooks, like in the onClick handler of the button, as this breaks the rules of hooks. I suggest refactoring the useRandomJoke hook to return the fetched joke and a function to fetch the next random joke. You also shouldn't mix async/await with Promise chains as this is an anti-pattern.
const useRandomJoke = () => {
const [jokes, setJokes] = useState(null);
const jokeFetch = async () => {
const res = await fetch("https://api.icndb.com/jokes/random");
const data = await res.json();
setJokes(data.value.joke)
};
return [jokes, jokeFetch];
};
Then use the hook in the app.
function App() {
const [joke, getJoke] = useRandomJoke();
return (
<div className="App">
<h1>Random Jokes</h1>
<p>{joke}</p>
<button onClick={getJoke}>Click for Joke</button>
</div>
);
}
Well, there is more than one point to talk about here:
1- in React.js, you can only call custom hooks at the top level of your function's body (react recognizes any function starting with the keyword use as a hook)
function App() {
// top level is here
const randomJokes = useRandomJoke()
const [jokes, setJokes] = useState();
return (
<div className="App">
<h1>Random Jokes</h1>
<p>{jokes}</p>
<button onClick={()=>{setJokes(useRandomJoke)}}>
Click for Jokes
</button>
</div>
); }
export default App;
2- In your example I understand you want to have a new joke each time onClick triggers, in order to do so, I don't think using a custom hook is the ideal solution here, since your custom hook runs the fetchJokes method only once on initial render (as you described in your useEffect hook), I understand a lot of people mention that useEffect is the place to make API calls, but it doesn't necessarily applies to all use cases, in your example it is simple, you don't have to use useEffect neither create a custom hook.
a possible simple solution:
function App() {
// we always call hooks at the top level of our function
const [jokes, setJokes] = useState();
const fetchNewJoke = () => {
fetch("https://api.icndb.com/jokes/random")
//we'll run 2 "then"
.then(
// this will give us response and will return inform of
res.json
(res) => res.json()
) //.json is a format
.then((data) => {
setJokes(data.value.joke);
}); // now calling data from te returned values in res.json
};
};
return (
<div className="App">
<h1>Random Jokes</h1>
<p>{jokes}</p>
<button onClick={fetchNewJoke}>Click for Joke</button>
</div>
);
} export default App;
I have html script data.
I want to put it in div. but when I do that It just shows "}" this and that's it.
I wonder what I did wrong.
When I log newDataHTML, I can get html string.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const getData = () => {
axios
.get('/api/data')
.then( (data) => {
// get new Data
const newDataHTML = data.data[0].rule;
return {__html: newDataHTML};
})
.catch( err => console.log(err));
}
return (
<div className="App">
<Tabs defaultTab="data" onChange={(tabId) => { console.log(tabId) }}>
<TabList>
<Tab tabFor="data">New Data</Tab>
</TabList>
<TabPanel tabId="data">
<div dangerouslySetInnerHTML={getData()}></div>;
</TabPanel>
</Tabs>
</div>
);
}
export default App;
It is not working because you can't return outside .then method and also you will encounter rerender loop... You can put the method in useEffect hook so it runs once and also put the return data in useState...
const [data, setData] = useState();
useEffect(() => {
const getData = () => {
axios.get('/api/data').then((res) => {
const newDataHTML = res.data[0].rule;
setData({__html: newDataHTML})
}).catch( err => console.log(err));
}
getData();
}, [])
you can now use the data variable in your jsx instead of calling the function in your jsx.
It will also be nice to use packages like DomPurify to avoid xss attacks.
https://www.npmjs.com/package/dompurify
when I try to get some data from my backend API using axios, and set the state after I've gotten the result for some reason the state is not updated and when I try to use the state it will only show me an empty array. but what's so interesting is that when I console.log(res.data) it will show me my array of lists with no problem, so I guess the problem is with the setCategories() state function. What am I doing wrong?
const Home = (props) => {
const [categories, setCategories] = useState([]);
useEffect(() => {
getCats();
}, []);
const getCats = async () => {
const data = await axios.get(`${myUrl}/allItems`, {
withCredentials: true,
});
const cats = await data.data;
console.log(cats); //this one works perfectly
setCategories(cats);
console.log(categories) //this one doesn'nt work which means the setState didn't work
};
return (
<>
<div className="card-div mt-5">
{categories.map((cat) => {
<li>{cat.name}</li>;
})}
</div>
</>
);
};
the state is set asynchronously, so the data is not updated instantly. that's why you are not getting the output on console.log(categories) right after setCategories(cats);
here is a small example of asynchronous behaviour of useState state update:
Link to working example: stackblitz
import React, { useEffect, useState } from "react";
import "./style.css";
import axios from "axios";
const url = "https://jsonplaceholder.typicode.com/users";
export default function App() {
const [users, setUsers] = useState([]);
useEffect(() => {
axios.get(url).then(result => {
console.log("1. when data is fetched sucessfully: ", result.data);
setUsers(result.data);
console.log("2. Just after setting state: ", users);
});
}, []);
// secons useEffect for logging out upadated todos useState
useEffect(() => {
console.log("todos upadated: ", users);
}, [users]);
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
{users.map(user => (
<p>{user.name}</p>
))}
</div>
);
}
Here is what is happening in the above example:
You can see the flow of data fetching and async update of state.
The useState function is asynchronous, so you will never get the new state in the same function, the best way is to use it in another function or useEffect.
Example:
useEffect(() => {
console.log(categories);
}, [categories]);
How to send http request on button click with react hooks? Or, for that matter, how to do any side effect on button click?
What i see so far is to have something "indirect" like:
export default = () => {
const [sendRequest, setSendRequest] = useState(false);
useEffect(() => {
if(sendRequest){
//send the request
setSendRequest(false);
}
},
[sendRequest]);
return (
<input type="button" disabled={sendRequest} onClick={() => setSendRequest(true)}
);
}
Is that the proper way or is there some other pattern?
export default () => {
const [isSending, setIsSending] = useState(false)
const sendRequest = useCallback(async () => {
// don't send again while we are sending
if (isSending) return
// update state
setIsSending(true)
// send the actual request
await API.sendRequest()
// once the request is sent, update state again
setIsSending(false)
}, [isSending]) // update the callback if the state changes
return (
<input type="button" disabled={isSending} onClick={sendRequest} />
)
}
this is what it would boil down to when you want to send a request on click and disabling the button while it is sending
update:
#tkd_aj pointed out that this might give a 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."
Effectively, what happens is that the request is still processing, while in the meantime your component unmounts. It then tries to setIsSending (a setState) on an unmounted component.
export default () => {
const [isSending, setIsSending] = useState(false)
const isMounted = useRef(true)
// set isMounted to false when we unmount the component
useEffect(() => {
return () => {
isMounted.current = false
}
}, [])
const sendRequest = useCallback(async () => {
// don't send again while we are sending
if (isSending) return
// update state
setIsSending(true)
// send the actual request
await API.sendRequest()
// once the request is sent, update state again
if (isMounted.current) // only update if we are still mounted
setIsSending(false)
}, [isSending]) // update the callback if the state changes
return (
<input type="button" disabled={isSending} onClick={sendRequest} />
)
}
You don't need an effect to send a request on button click, instead what you need is just a handler method which you can optimise using useCallback method
const App = (props) => {
//define you app state here
const fetchRequest = useCallback(() => {
// Api request here
}, [add dependent variables here]);
return (
<input type="button" disabled={sendRequest} onClick={fetchRequest}
);
}
Tracking request using variable with useEffect is not a correct pattern because you may set state to call api using useEffect, but an additional render due to some other change will cause the request to go in a loop
In functional programming, any async function should be considered as a side effect.
When dealing with side effects you need to separate the logic of starting the side effect and the logic of the result of that side effect (similar to redux saga).
Basically, the button responsibility is only triggering the side effect, and the side effect responsibility is to update the dom.
Also since react is dealing with components you need to make sure your component still mounted before any setState or after every await this depends on your own preferences.
to solve this issue we can create a custom hook useIsMounted this hook will make it easy for us to check if the component is still mounted
/**
* check if the component still mounted
*/
export const useIsMounted = () => {
const mountedRef = useRef(false);
const isMounted = useCallback(() => mountedRef.current, []);
useEffect(() => {
mountedRef.current = true;
return () => {
mountedRef.current = false;
};
});
return isMounted;
};
Then your code should look like this
export const MyComponent = ()=> {
const isMounted = useIsMounted();
const [isDoMyAsyncThing, setIsDoMyAsyncThing] = useState(false);
// do my async thing
const doMyAsyncThing = useCallback(async () => {
// do my stuff
},[])
/**
* do my async thing effect
*/
useEffect(() => {
if (isDoMyAsyncThing) {
const effect = async () => {
await doMyAsyncThing();
if (!isMounted()) return;
setIsDoMyAsyncThing(false);
};
effect();
}
}, [isDoMyAsyncThing, isMounted, doMyAsyncThing]);
return (
<div>
<button disabled={isDoMyAsyncThing} onClick={()=> setIsDoMyAsyncThing(true)}>
Do My Thing {isDoMyAsyncThing && "Loading..."}
</button>;
</div>
)
}
Note: It's always better to separate the logic of your side effect from the logic that triggers the effect (the useEffect)
UPDATE:
Instead of all the above complexity just use useAsync and useAsyncFn from the react-use library, It's much cleaner and straightforward.
Example:
import {useAsyncFn} from 'react-use';
const Demo = ({url}) => {
const [state, doFetch] = useAsyncFn(async () => {
const response = await fetch(url);
const result = await response.text();
return result
}, [url]);
return (
<div>
{state.loading
? <div>Loading...</div>
: state.error
? <div>Error: {state.error.message}</div>
: <div>Value: {state.value}</div>
}
<button onClick={() => doFetch()}>Start loading</button>
</div>
);
};
You can fetch data as an effect of some state changing like you have done in your question, but you can also get the data directly in the click handler like you are used to in a class component.
Example
const { useState } = React;
function getData() {
return new Promise(resolve => setTimeout(() => resolve(Math.random()), 1000))
}
function App() {
const [data, setData] = useState(0)
function onClick() {
getData().then(setData)
}
return (
<div>
<button onClick={onClick}>Get data</button>
<div>{data}</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<div id="root"></div>
You can define the boolean in the state as you did and once you trigger the request set it to true and when you receive the response set it back to false:
const [requestSent, setRequestSent] = useState(false);
const sendRequest = () => {
setRequestSent(true);
fetch().then(() => setRequestSent(false));
};
Working example
You can create a custom hook useApi and return a function execute which when called will invoke the api (typically through some onClick).
useApi hook:
export type ApiMethod = "GET" | "POST";
export type ApiState = "idle" | "loading" | "done";
const fetcher = async (
url: string,
method: ApiMethod,
payload?: string
): Promise<any> => {
const requestHeaders = new Headers();
requestHeaders.set("Content-Type", "application/json");
console.log("fetching data...");
const res = await fetch(url, {
body: payload ? JSON.stringify(payload) : undefined,
headers: requestHeaders,
method,
});
const resobj = await res.json();
return resobj;
};
export function useApi(
url: string,
method: ApiMethod,
payload?: any
): {
apiState: ApiState;
data: unknown;
execute: () => void;
} {
const [apiState, setApiState] = useState<ApiState>("idle");
const [data, setData] = useState<unknown>(null);
const [toCallApi, setApiExecution] = useState(false);
const execute = () => {
console.log("executing now");
setApiExecution(true);
};
const fetchApi = useCallback(() => {
console.log("fetchApi called");
fetcher(url, method, payload)
.then((res) => {
const data = res.data;
setData({ ...data });
return;
})
.catch((e: Error) => {
setData(null);
console.log(e.message);
})
.finally(() => {
setApiState("done");
});
}, [method, payload, url]);
// call api
useEffect(() => {
if (toCallApi && apiState === "idle") {
console.log("calling api");
setApiState("loading");
fetchApi();
}
}, [apiState, fetchApi, toCallApi]);
return {
apiState,
data,
execute,
};
}
using useApi in some component:
const SomeComponent = () =>{
const { apiState, data, execute } = useApi(
"api/url",
"POST",
{
foo: "bar",
}
);
}
if (apiState == "done") {
console.log("execution complete",data);
}
return (
<button
onClick={() => {
execute();
}}>
Click me
</button>
);
For this you can use callback hook in ReactJS and it is the best option for this purpose as useEffect is not a correct pattern because may be you set state to make an api call using useEffect, but an additional render due to some other change will cause the request to go in a loop.
<const Component= (props) => {
//define you app state here
const getRequest = useCallback(() => {
// Api request here
}, [dependency]);
return (
<input type="button" disabled={sendRequest} onClick={getRequest}
);
}
My answer is simple, while using the useState hook the javascript doesn't enable you to pass the value if you set the state as false. It accepts the value when it is set to true. So you have to define a function with if condition if you use false in the usestate