I am trying to use a react hook like useMemo or useEffect inside my functional component. The API call is async, and I think that may be what's causing the error.
Service file:
export const getData = (): wretch =>
fetch('/d/get_data')
.get()
.json();
Data formatting logic file:
import {getData} from './services';
export const formatData = (onClick, onSort) => {
// logic here - omitted
const formattedData = [];
return getData().then(res => {
res.forEach(
// more data formatting logic
)
return {formattedData: formattedData, originalData: res};
})};
Rendering file:
import {formatData} from './formatData';
const MyTable = () => {
useEffect(() => formatData({onClick: handleClick, onSort: handleSort}).then(res => setData(res)), []);
Error message:
You're correct about the part where you cant have async code in your useEffect. A workaroud for that is similar to what you're doing.
useEffect(() => {
async function myfunc(){
// Do async work
const response = await apiCall();
setData(response);
}
myFunc();
},[])
This might not answer your question, but it is a common pattern you might find useful :)
Please try this one.
const MyTable = () => {
useEffect(async () => {
const data = await formatData({onClick: handleClick, onSort: handleSort});
setData(data);
},
[]);
}
Related
I am new with react hooks, i'm trying to get info from an API but when i do the request i get 2 responses first an empty array and then the data of the API, why am i getting that empty array! , this is my first question, i'm sorry.
Thanks for helping me !
import {useState, useEffect} from 'react';
const getSlides = (API) => {
const[data,setData] = useState([]);
const getData = () =>
fetch(`${API}`)
.then((res) => res.json())
useEffect(() => {
getData().then((data) => setData(data))
},[])
return data
}
export default getSlides;
The useEffect() hook runs after the first render. Since you've initialized the data state with an empty array, the first render returns an empty array.
If you're component depends on data to render, you can always conditionally return null until your data is loaded.
Also, I recommend using an async function for api requests, it allows you to use the await keyword which makes your code easier to read. The only caveat, is that you cannot pass an async function to useEffect, instead define an async function inside your hook, and then call it.
import React, { useState, useEffect } from "react";
const API = "https://example.com/data";
const GetSlides = (props) => {
const [data, setData] = useState();
useEffect(() => {
async function getData() {
const request = fetch(API);
const response = await request;
const parsed = await response.json();
setData(parsed);
}
getData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (data === undefined) {
return null;
}
return <>data</>;
};
export default GetSlides;
Of course, you can still use Promise chaining if you desire.
useEffect(() => {
async function getData() {
await fetch(API)
.then((res) => res.json())
.then((data) => setData(data));
}
getData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
<GetSlides api="https://yay.com" />
react components need to be title case
import React, { useState, useEffect } from 'react'
const GetSlides = ({ api }) => {
const [data, setData] = useState(null)
const getData = async () =>
await fetch(`${api}`)
.then((res) => res.json())
.then((data) => setData(data))
useEffect(() => {
getData()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
console.log(data)
return <div>slides</div>
}
export default GetSlides
The effect callback function is called after the render of your component. (Just like componentDidMount) So during the first render phase, the data state has not been set yet.
You initialize your data with and empty array here:
const[data,setData] = useState([] <- empty array);
useEffect runs after your component is mounted, and then calls the API, that it might take a few seconds or minutes to retrieve the data, but you return the data right away before knowing if the API finished its call.
If you want to return the data after it has been retrieved from the API, you should declare and async method
const getSlides = async (API) => {
try {
const res = await fetch(API);
const data = await res.json();
return data;
} catch (e) {
throw new Error(e);
}
}
Note that it is not necessary hooks for this function
i've a (certainly) stupid problem.
my function getDataTbable is called in infinity loop I don't understand why... So the request is infinitive called.
export const TableResearch = ({setSelectedSuggestion,setImages}) => {
const [research, setResearch] = useState('');
const [suggestions, setSuggestions] = useState ([]);
const [table, setTable]= useState ([]);
const getDataTable = async () => {
const {data} = await jsonbin.get('/b/5f3d58e44d93991036184474');
setTable(data);
console.log(table)
};
getDataTable();
That is because the TableResearch function is called multiple times (every time this component is rendered). If you want to run a function only when the component is mounted, you'll have to use useEffect. Here is an example:
useEffect(() => {
const {data} = await jsonbin.get('/b/5f3d58e44d93991036184474');
setTable(data);
}, []);
The second parameter [] passed to useEffect is important. It makes the function run only once.
You can learn more about useEffect from HERE
The component re-renders every time you change it's state (setTable).
You should use useEffect to only execute your function the first time it renders.
Also you might encounter this warning:
Warning: Can't perform a React state update on an unmounted component.
if the async call finishes after component has unmounted. To account for that, write useEffect like this:
// outside component
const getDataTable = async () => {
const { data } = await jsonbin.get("/b/5f3d58e44d93991036184474");
return data;
};
useEffect(() => {
let mounted = true;
getDataTable()
.then(data => {
if (!mounted) return;
setTable(data);
});
return () => {
mounted = false;
};
}, []);
You can try this
useEffect(() => {
const getDataTable = async () => {
const { data } = await jsonbin.get("/b/5f3d58e44d93991036184474");
setTable(data);
console.log(table);
};
getDataTable();
}, []); // [] makes it runs once
Yes, getDataTable(); is being executed everytime the view is rendered, including when the data is returned.
Try wrapping getDataTable() like this:
if (!table.length) {
getDataTable()
}
But you will need to handle the case for if the requests returns no results, in which case it will still run infinitely:
const [table, setTable]= useState([]);
const [loading, setLoading]= useState();
const getDataTable = async () => {
setLoading(true);
const {data} = await jsonbin.get('/b/5f3d58e44d93991036184474');
setTable(data);
setLoading(false);
};
if (typeof loading === 'undefined' && !table.length) {
getDataTable();
}
I have the following React functional component with useState and useEffect hooks:
import React, { useState, useEffect } from 'react';
import { requestInfo } from './helpers/helpers';
const App = () => {
const [people, setPeople] = useState([]);
useEffect(() => {
requestInfo('people', '82')
.then(results => setPeople(results))
}, []);
return (
<p>We have {people.length} people in this game.</p>
);
}
export default App;
In helpers.js I have this function:
export const requestInfo = (resource, quantity) => {
fetch(`https://swapi.dev/api/${resource}/?results=${quantity}`)
.then(response => response.json)
.then(data => data.results)
}
I don't have much experience of writing asynchronous functions that call APIs, but I've looked at other Q&As on this website that said in situations like this I need to have the helper function return a promise, then have the code that calls the helper function do something with the outcome of the promise, in this case pass it to the setPeople hook state setter function.
I'm currently getting the error TypeError: Cannot read property 'then' of undefined from within my call to useEffect.
I think the endpoint is correct because this command works and returns the expected data when run in my terminal:
curl https://swapi.dev/api/people/\?results\=82
I'd be very grateful if someone can show me how to modify one or both of my functions to make this work.
a few issues - one in useEffect you need to await the response from the requestInfo call so:
useEffect(() => {
const getAsyncInfo = async () => {
const res = await requestInfo('people', '82')
setPeople(res)
}
getAsyncInfo()
}, [])
next make sure you are returning the fetch from requestInfo and it's json() as a function - requestInfo can use async/await as well such as:
export const requestInfo = async(resource, quantity) => {
const res = await fetch(`https://swapi.dev/api/${resource}/?results=${quantity}`)
const json = await res.json()
return json.results
}
Your function requestInfo is currently not returning anything (hence the error message). You either need to get rid of the {} after the arrow, or you need to return fetch(...).then(...) etc.
export const requestInfo = (resource, quantity) =>
fetch(`https://swapi.dev/api/${resource}/?results=${quantity}`)
.then(response => response.json)
.then(data => data.results)
export const requestInfo = (resource, quantity) => {
return fetch(`https://swapi.dev/api/${resource}/?results=${quantity}`)
.then(response => response.json)
.then(data => data.results)
}
I am calling this api inside a context provider:
const url = 'http://127.0.0.1:8000/api/posts/'
const PostListContextProvider = (props) => {
const [posts, setPosts] = useState([])
useEffect(async () => {
const {data} = await axios.get(url);
setPosts(data)
}, [posts]);
return (
<PostListContext.Provider value={ posts }>
{ props.children }
</PostListContext.Provider>
);
}
Upon consuming the context using useContext, this error occurs:
react-dom.development.js:19710 Uncaught TypeError: destroy is not a function
What am I doing wrong?
ps.even though I am getting the error, I am still successfully fetching the data
useEffect should not be async
Do it like this:
useEffect(() => {
(async () => {
const {data} = await axios.get(url);
setPosts(data)
})()
}, [posts]);
useEffect is supposed to return a function if it returns something, since you are defining the callback function to useEffect as a promise, what it essentially returns is a promise which is not what it expects.
In order to use a async function within useEffect you would write it like
useEffect(() => {
async function myFn() {
const {data} = await axios.get(url);
setPosts(data)
}
myFn();
}, [posts]);
I get this error:
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.
when fetching of data is started and component was unmounted, but function is trying to update state of unmounted component.
What is the best way to solve this?
CodePen example.
default function Test() {
const [notSeenAmount, setNotSeenAmount] = useState(false)
useEffect(() => {
let timer = setInterval(updateNotSeenAmount, 2000)
return () => clearInterval(timer)
}, [])
async function updateNotSeenAmount() {
let data // here i fetch data
setNotSeenAmount(data) // here is problem. If component was unmounted, i get error.
}
async function anotherFunction() {
updateNotSeenAmount() //it can trigger update too
}
return <button onClick={updateNotSeenAmount}>Push me</button> //update can be triggered manually
}
The easiest solution is to use a local variable that keeps track of whether the component is mounted or not. This is a common pattern with the class based approach. Here is an example that implement it with hooks:
function Example() {
const [text, setText] = React.useState("waiting...");
React.useEffect(() => {
let isCancelled = false;
simulateSlowNetworkRequest().then(() => {
if (!isCancelled) {
setText("done!");
}
});
return () => {
isCancelled = true;
};
}, []);
return <h2>{text}</h2>;
}
Here is an alternative with useRef (see below). Note that with a list of dependencies this solution won't work. The value of the ref will stay true after the first render. In that case the first solution is more appropriate.
function Example() {
const isCancelled = React.useRef(false);
const [text, setText] = React.useState("waiting...");
React.useEffect(() => {
fetch();
return () => {
isCancelled.current = true;
};
}, []);
function fetch() {
simulateSlowNetworkRequest().then(() => {
if (!isCancelled.current) {
setText("done!");
}
});
}
return <h2>{text}</h2>;
}
You can find more information about this pattern inside this article. Here is an issue inside the React project on GitHub that showcase this solution.
If you are fetching data from axios(using hooks) and the error still occurs, just wrap the setter inside the condition
let isRendered = useRef(false);
useEffect(() => {
isRendered = true;
axios
.get("/sample/api")
.then(res => {
if (isRendered) {
setState(res.data);
}
return null;
})
.catch(err => console.log(err));
return () => {
isRendered = false;
};
}, []);
TL;DR
Here is a CodeSandBox example
The other answers work of course, I just wanted to share a solution I came up with.
I built this hook that works just like React's useState, but will only setState if the component is mounted. I find it more elegant because you don't have to mess arround with an isMounted variable in your component !
Installation :
npm install use-state-if-mounted
Usage :
const [count, setCount] = useStateIfMounted(0);
You can find more advanced documentation on the npm page of the hook.
Here is a simple solution for this. This warning is due to when we do some fetch request while that request is in the background (because some requests take some time.)and we navigate back from that screen then react cannot update the state. here is the example code for this. write this line before every state Update.
if(!isScreenMounted.current) return;
Here is Complete Example
import React , {useRef} from 'react'
import { Text,StatusBar,SafeAreaView,ScrollView, StyleSheet } from 'react-native'
import BASEURL from '../constants/BaseURL';
const SearchScreen = () => {
const isScreenMounted = useRef(true)
useEffect(() => {
return () => isScreenMounted.current = false
},[])
const ConvertFileSubmit = () => {
if(!isScreenMounted.current) return;
setUpLoading(true)
var formdata = new FormData();
var file = {
uri: `file://${route.params.selectedfiles[0].uri}`,
type:`${route.params.selectedfiles[0].minetype}`,
name:`${route.params.selectedfiles[0].displayname}`,
};
formdata.append("file",file);
fetch(`${BASEURL}/UploadFile`, {
method: 'POST',
body: formdata,
redirect: 'manual'
}).then(response => response.json())
.then(result => {
if(!isScreenMounted.current) return;
setUpLoading(false)
}).catch(error => {
console.log('error', error)
});
}
return(
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Text>Search Screen</Text>
</ScrollView>
</SafeAreaView>
</>
)
}
export default SearchScreen;
const styles = StyleSheet.create({
scrollView: {
backgroundColor:"red",
},
container:{
flex:1,
justifyContent:"center",
alignItems:"center"
}
})
This answer is not related to the specific question but I got the same 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. and as a React newcomer could not find a solution to it.
My problem was related to useState in an unmounted component.
I noticed that I was calling a set state function (setIsLoading) after the function that unmounted my component:
const Login = () => {
const [isLoading, setIsLoading] = useState(false);
const handleLogin = () => {
setIsLoading(true);
firebase.auth().then(
functionToUnMountLoginSection();
// the problem is here
setIsLoading(false);
)
}
}
The correct way is to call setIsLoading when the component is still mounted, before calling the function to unmount/process user login in my specific case:
firebase.auth().then(
setIsLoading(false);
functionToUnMountLoginSection();
)
You add the state related datas into the useEffect body for not rerunning them every rerendering process. This method will solve the problem.
useEffect(() => {
let timer = setInterval(updateNotSeenAmount, 2000)
return () => clearInterval(timer)
}, [notSeenAmount])
REF: Tip: Optimizing Performance by Skipping Effects
Custom Hook Solution (ReactJs/NextJs)
Create a new folder named 'shared' and add two folders named 'hooks', 'utils' in it. Add a new file called 'commonFunctions.js' inside utils folder and add the code snippet below.
export const promisify = (fn) => {
return new Promise((resolve, reject) => {
fn
.then(response => resolve(response))
.catch(error => reject(error));
});
};
Add a new file called 'fetch-hook.js' inside hooks folder and add the code snippet below.
import { useCallback, useEffect, useRef } from "react";
import { promisify } from "../utils/commonFunctions";
export const useFetch = () => {
const isUnmounted = useRef(false);
useEffect(() => {
isUnmounted.current = false;
return () => {
isUnmounted.current = true;
};
}, []);
const call = useCallback((fn, onSuccess, onError = null) => {
promisify(fn).then(response => {
console.group('useFetch Hook response', response);
if (!isUnmounted.current) {
console.log('updating state..');
onSuccess(response.data);
}
else
console.log('aborted state update!');
console.groupEnd();
}).catch(error => {
console.log("useFetch Hook error", error);
if (!isUnmounted.current)
if (onError)
onError(error);
});
}, []);
return { call }
};
Folder Structure
Our custom hook is now ready. We use it in our component like below
const OurComponent = (props) => {
//..
const [subscriptions, setSubscriptions] = useState<any>([]);
//..
const { call } = useFetch();
// example method, change with your own
const getSubscriptions = useCallback(async () => {
call(
payment.companySubscriptions(userId), // example api call, change with your own
(data) => setSubscriptions(data),
);
}, [userId]);
//..
const updateSubscriptions = useCallback(async () => {
setTimeout(async () => {
await getSubscriptions();
}, 5000);// 5 seconds delay
}, [getSubscriptions]);
//..
}
In our component, we call 'updateSubscriptions' method. It will trigger 'getSubscriptions' method in which we used our custom hook. If we try to navigate to a different page after calling updateSubscriptions method before 5 seconds over, our custom hook will abort state update and prevent that warning on the title of this question
Wanna see opposite?
Change 'getSubscriptions' method with the one below
const getSubscriptions = useCallback(async () => {
const response = await payment.companySubscriptions(userId);
setSubscriptions(response);
}, [userId]);
Now try to call 'updateSubscriptions' method and navigate to a different page before 5 seconds over
Try this custom hook:
import { useEffect, useRef } from 'react';
export const useIsMounted = () => {
const isMounted = useRef(false);
useEffect(() => {
isMounted.current = true;
return () => (isMounted.current = false);
}, []);
return isMounted;
};
function Example() {
const isMounted = useIsMounted();
const [text, setText] = useState();
const safeSetState = useCallback((callback, ...args) => {
if (isMounted.current) {
callback(...args);
}
}, []);
useEffect(() => {
safeSetState(setText, 'Hello')
});
}, []);
return <h2>{text}</h2>;
}