CODEWITHSUNDEEP
javascriptreactjsasync-awaitaxiosreact-hooks
Chris Foster
Chris Foster

Reputation: 531

"The final argument passed to useEffect changed size between renders", except I don't think it does?

I don't think I've ever received this error before:

The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.

I've done axios requests in useEffect() 100 times, using useEffect() in a similar manner to componentDidMount(), but this is the first time that I've used a reusable function with async/await, and resolved the data back to the useEffect(). Other people online are doing this exact same thing in their tutorials, but they never mentioned this error.

const [tableData, setTableData] = useState([])
    useEffect(() => {
        const data = async() => {
            const dataArr = await getPagList('tags', 1, 25)
            console.log("Data received: ", dataArr)
            if(dataArr.length > 0) {
                setTableData(dataArr)
            }
        }
        data()
    }, [])

I believe, it's complaining about the empty array I'm feeding useEffect() as the 2nd parameter. However, that empty array isn't changing... Right? I tried googling it, but the solutions I found for this error were what I'm already doing. None of the examples were using async/await.

I have also tried this, with no success:

    useEffect(() => {
        setData()
    }, [])

    const setData = () => {
        const data = async() => {
            const dataArr = await getPagList('tags', 1, 25)
            console.log("Data received: ", dataArr)
            if(dataArr.length > 0) {
                setTableData(dataArr)
            }
            // TODO Properly handle this data now that I'm getting it in. It's only 9 records though.
        }
        data()
    }

Am I not exiting the useEffect properly or something? Anyway, thanks guys.

Upvotes: 52

Views: 53210

Answers (1)

Jason G
Jason G

Reputation: 2733

If you have a

useEffect(() => {}, itemArray)

and you modify itemArray, you will get this error. this is probably just a typo. I did this when I had a list of items I was using from state. It didn't catch it because it was an array. You need [] around the itemArray.

useEffect(() => {}, [itemArray])

The real issue is that your dependency array changed size, not that you added another item to your array. fix this typo and you should be fine.

Upvotes: 140

Related Questions