38

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.

shaedrich
  • 5,457
  • 3
  • 26
  • 42
Chris Foster
  • 391
  • 1
  • 3
  • 3
  • 2
    Are you sure that's the particular `useEffect()` call that React is complaining about? – Patrick Roberts Jan 22 '20 at 16:42
  • 1
    You'll get this error if you actually give a different size array (the code you've quoted doesn't, all usages have a blank array) or if you have logic that changes the order of hook calls in your component and happens to swap two `useEffect` calls. Be sure **none** of the hook calls in your component are in branches, the type and order of the hooks you call has to be exactly the same for each render. – T.J. Crowder Jan 22 '20 at 16:45
  • Other than that, we can't help you without a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button). Stack Snippets support React, including JSX; [here's how to do one](http://meta.stackoverflow.com/questions/338537/). – T.J. Crowder Jan 22 '20 at 16:45
  • Side note: You have a problem with your `setData` function: It doesn't handle potential rejections from `data`, and `data` doesn't ensure that it never rejects its promise. You need to either add a `catch` call to `data()` or use `try`/`catch` within `data` to catch all errors that may occur within it. – T.J. Crowder Jan 22 '20 at 16:47
  • Patrick, you're right. I thought it was this one b/c it went away when I commented out the set state. But it's actually a child one that receives the data. I guess that's not something I thought could happen. – Chris Foster Jan 22 '20 at 16:58

1 Answers1

114

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.

Jason G
  • 2,395
  • 2
  • 24
  • 34
  • Even if the dependency array is empty this warning is thrown. Can anyone shed some light on this? – AshTyson Jun 04 '21 at 11:16
  • @AshTyson what do you mean? useEffect(() => {}, []) does not throw an error. – Jason G Jun 09 '21 at 14:43
  • No there are parts of our application it does throw this warning. Ofcourse we dont have a empty function as the first parameter – AshTyson Jun 10 '21 at 15:33
  • I'm not sure what you mean then. show some code and i can take a look – Jason G Jun 14 '21 at 18:38
  • Can't really post it all here because its proprietary. But here are some screenshots. React is very weird. https://ibb.co/xjJvv0x https://ibb.co/xJ4RpFQ it threw 21 errors for the same line. – AshTyson Jun 15 '21 at 07:38
  • well, archiveId needs to be in the list to prevent the linting error. I'm not sure without seeing the rest of the code what is going on. – Jason G Jun 24 '21 at 15:27
  • That specific rule is disabled as you can see from the comment. This is the only useEffect in that file. And it throws this error multiple times. Thats why I say React doesn't handle/bubble errors very well. – AshTyson Jun 24 '21 at 19:03