Episode 22 game · Chitragupta · Water

Break the Ouroboros

Kai opens his scroll search once, and it fetches forever. Feel the useEffect infinite loop as Chitragupta’s ledger fills with renders, fix the dependency that is a new object on every render and the button that sets state while rendering, then prove the page makes exactly one request.

ChitraguptaI write one line for every render, Kai. Open your search page once, and let us count.
22Seal 22
kai.app/scrolls?tag=fire

      
renders0
requests0

      
Not opened yet.

    

    

      
Chitragupta’s ledger one line per render, with what the effect did

      
    
    
    
    
  
    

  
    
    
    1 · Feel the loop
    
    
    The board runs a small model of React: render, then the effect runs if any dependency changed by Object.is, then setResults with the new array. Open the page once.
    
    
    
      
      
    
    
  
    

  

  

    
    
    
    Objects are new every render
    { tag } made in the body fails Object.is each time, so the effect runs again.
    Depend on values
    Build the object inside the effect and list [tag]; strings compare by value.
    No setState in render
    Write onClick={() => setOpen(true)}, not onClick={setOpen(true)}.