Why am I getting Too many re-renders in my code and how to resolve it?

You are setting info when the component is rendered. Then you are checking if the info is set and running the chunkEpisodes function. {info ? chunkEpisode() : console.log("")}. Info will be set every time so you are constantly running the chunkEpisodes function. Instead of running this check you should put it in a useEffect hook with info as a dependency and if info is set then run the chunkEpisodes function. Like so:

useEffect(() => {
  if(info){
    chunkEpisode()
  }
}, [info])

In React, every time any state changes the whole component gets re-rendered.

When this happens React will go through JSX and try to detect changes to any state and re-render them.

Since, you have invoked chunkEpisode() in JSX, it is causing state change i.e episodeList. Because of state change, the JSX is re-renderd, invoking chunkEpisode() again. This is happening infinitely.

A better approach would be to invoke chunkEpisode() using useEffect hook.

useEffect(() => {
    if (info) {
      chunkEpisode()
    }
}, [info])

And delete this line

{info ? chunkEpisode() : console.log("")}

After getting the response and setting info call chunkEpisode() with the data,rather than calling it from the return.

const getInfo = async () => {
    const { data } = await instance.get("/getInfo?slug=" + slug)
    setInfo(data.data)
    chunkEpisode(data.data)
    setDone(true)
}

I guess your problem lays in the info.episodes.splice(0, 10) . Splice mutates the info state and triggers consecutive re-renders.

If you do it like this you'll see the error is gone and episodeList state is updated.

So depends on what you intended with slice you can go from here and modify the code below:

function MovieWatch({ instance }) {
  const [info, setInfo] = useState([])
  const [done, setDone] = useState(false)
  const [episodeList, setEpisodeList] = useState([])

  let { slug } = useParams()

  const getInfo = async () => {
      const { data } = await instance.get("/getInfo?slug=" + slug)
      setInfo(data.data)
      setDone(true)
  }

  useEffect( () => {
    getInfo();
  }, [])

  const chunkEpisode = () => {
      const episodeListChunk = []
      // while (info.episodes.length) {
      //     episodeListChunk.push(info.episodes.splice(0, 10))
      // }
      info.episodes.forEach((e)=>{
        episodeListChunk.push(e)
      })
      console.log(episodeListChunk);
      setEpisodeList(episodeListChunk)
  }

  return (
      <>
          <div>Hello info page</div>
          {!done ? (
              <Loading loading={true} background="#000000" loaderColor="#FFFF00" />
          ) : (
              <>
                  {/* {info ? chunkEpisode() : console.log("")} */}
                  {episodeList.length ? episodeList : (chunkEpisode(), console.log(""))}
                  <div>Done loading</div>
              </>
          )}
      </>
  )
}

After reading some of the above answers, I've tried to instead of creating 1 big array at first, then I just splice it whenever the first time I receive that big array, I don't know if my explanation is correct or not...

From what @Rejo Mathew ways of using chunkEpisode(data.data), then I wonders what's the point of setting info state, so I removed it, and from @Steve K with @MWO explained, I tried to do this. It's working fine now.

But still, I still do not want to do it this way, seems odd to me than the first one, because the first one seems cool to me, weird why it's not working.

Instead of setInfo, then use that info to implement into the function, I just use that data I received from without setting it, then merge the chunkEpisode into getInfo function, then use useEffect to just only call it once I guess.

Here's the code after I do it:

function MovieWatch({ instance }) {
    const [done, setDone] = useState(false)
    const [episodeList, setEpisodeList] = useState([])

    let { slug } = useParams()

    const getInfo = async () => {
        const { data } = await instance.get("/getInfo?slug=" + slug)

        const episodeListChunk = []
        while (data.data.episodes.length) {
            episodeListChunk.push(data.data.episodes.splice(0, 10))
        }
        setEpisodeList(episodeListChunk)
        setDone(true)
    }

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

    return (
        <>
            <div>Hello info page</div>
            {!done ? (
                <Loading loading={true} background="#000000" loaderColor="#FFFF00" />
            ) : (
                <>
                    {console.log(episodeList)}
                    <div>Done loading</div>
                </>
            )}
        </>
    )
}

The result after I changed my code this way.

But please give me more advice to optimize this.