Re-Rendering

Occurs when

• A state is updated with setState()
• Updating a prop
• forceUpdate()

The tutorial here mentions something about components not re-rendering as a benefit of utilizing immutabilitytodo

Infinite Render Loops 😨

Consider le following:

const [modules, setModules] = useState<JSX.Element[]>();
setModules( [<TestModule />, <OtherModule /> ] );

You’ll get an error like this:

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

This is because setModules updates a state, which re-renders the component, but that just starts the code making up the contents of the component again from the top, thereby creating a loop.