Side Effects

When a component is interacting with any external file, APIs, DOM, then its called a Side Effect.

useEffect Hook

It is used to handle the Side Effects.

useEffect is a hook in react which is used to perform side effects in functional components

useEffect(()=>{
	// -- code --
},[dependencies])

This useEffect postpones the Side Effect function till the Component is rendered.

This avoids any UI distortions due to improper loadings and request, fetch.

• Example
• Web Page

1. The effect function only after the initial rendering
2. The Effect function will only work if the dependency array is empty
3. the effect function will work every time when the state is changed

<aside> 💡 During development of application, to avoid any ambiguity and unexpected outcomes,

Functions are intentionally invoked twice to help identify and fix potential side effects . This behavior occurs only in development mode.

main.jsx :

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>,
)

The strict mode is commented.

</aside>