Manage side effects properly

Avoid performing side effects directly in component render functions. Use useEffect for side effects like API calls, DOM manipulations, or state changes that should occur after render. Wrap functions with useCallback when they need to be optimized or used as dependencies, and use async/await for proper asynchronous handling.

copy reviewer prompt

Prompt

Reviewer Prompt
Deploy Agent

Avoid performing side effects directly in component render functions. Use useEffect for side effects like API calls, DOM manipulations, or state changes that should occur after render. Wrap functions with useCallback when they need to be optimized or used as dependencies, and use async/await for proper asynchronous handling.

Example of incorrect usage:

const I18n: FC<II18nProps> = ({ locale, children }) => {
  // ❌ Side effect in render
  locale && changeLanguage(locale)
  
  return <I18NContext.Provider>...</I18NContext.Provider>
}

Example of correct usage:

const I18n: FC<II18nProps> = ({ locale, children }) => {
  // ✅ Side effect in useEffect
  useEffect(() => {
    locale && changeLanguage(locale)
  }, [locale])

  // ✅ Function wrapped with useCallback and async/await
  const handleRender = useCallback(async () => {
    await renderFlowchart(code)
  }, [code])
  
  return <I18NContext.Provider>...</I18NContext.Provider>
}

This ensures predictable component behavior, prevents unnecessary re-renders, and maintains React’s rendering principles.

Source discussions