React Strict Mode

React's Strict Mode is a tool that helps developers write better and more robust React applications. It is a development mode-only feature, meaning it does not affect the production build of your application.

Strict Mode activates additional checks and warnings for its descendants, helping to identify potential problems early in the development cycle. These checks include:

• Identifying Unsafe Lifecycles: It flags components with deprecated or unsafe lifecycle methods.
• Highlighting Side Effects: Strict Mode helps detect unexpected side effects in code, such as side effects in useEffect or other lifecycle methods.
• Enforcing Best Practices: It enforces best practices like avoiding usage of legacy React features.
• Simulating Mount/Unmount Cycles: It intentionally mounts and unmounts components twice to surface issues in cleanup logic.

Example for this is an event listener which you forgot to remove afterwards. The output of the code below will trigger the addEventListener twice and whenever you click within the dom it will output twice.

import { useEffect } from 'react'

export function Home() {
  const handleClick = () => {
    console.log('click')
  }

  useEffect(() => {
    document.addEventListener('click', handleClick)
  }, [])

  return (
    <>
      <p>Home</p>
    </>
  )
}

This is an example of why React Strict Mode is important for development. To fix this issue we just need to remove the event listener upon unmount of the component. The useEffect will look like this.

useEffect(() => {
  document.addEventListener('click', handleClick)

  () => document.removeEventListener('click', handleClick)
}, [])

You can check more information by going through their documentation.