useEffect hook

side effects

makes function impure
pure function → receives input, returns exact same output in all cases
impure function → invokes something external to function
- console.log()
- fetch
- browser geolocation functionality
dealing with impure functions in react → contain impure actions inside useEffect hook
ex. data fetching, directly manipulating the DOM, setting up subscriptions, logging to the console

using useEffect

accepts 2 parameters, callback function and an array
The code you place inside the useEffect hook always runs after your component mounts or, in other words, after React has updated the DOM.
depending on your configuration via the dependencies array, your effects can also run when certain state variables or props change
If you omit the dependency array, the useEffect callback will run after every render of the component. This can sometimes lead to performance issues or unintended behavior if not managed carefully.
```
useEffect(() => { 
   document.title = 'Little Lemon';
 });
```
When you provide an empty dependency array [], the useEffect hook will run only once after the initial render, and then not again on subsequent re-renders. This is useful for effects that don't need to react to any changes in props or state, like setting up a subscription or fetching data once.
```
useEffect(() => { 
   document.title = 'Little Lemon';
 }, []);
```
here, the effect will only be re-run if the version number changes between renders
- If version is 2 and the component re-renders and version still equals 2, React will compare [2] from the previous render and [2] from the next render. Since all items inside the array are the same, React would skip running the effect.
```
useEffect(() => { 
  document.title = `Little Lemon, v${version}`;
}, [version]); // Only re-run the effect if version changes 
```

group related logic together in the same effect and break up unrelated logic into different effects

function MenuPage(props) { 
  const [data, setData] = useState([]); 

  useEffect(() => { 
    document.title = 'Little Lemon'; 
  }, []); 

  useEffect(() => { 
    fetch(`https://littlelemon/menu/${id}`) 
      .then(response => response.json()) 
      .then(json => setData(json)); 
  }, [props.id]); 
  // ... 
}

side effects may need to clean up resources or memory that is not required anymore, avoiding any memory leaks that could slow down your applications

If your effect returns a function, React will run it when it’s time to clean up resources and free unused memory

function LittleLemonChat(props) { 
  const [status, chatStatus] = useState('offline'); 

  useEffect(() => { 
    LemonChat.subscribeToMessages(props.chatId, () => setStatus('online')) 

    return () => { 
      setStatus('offline'); 
      LemonChat.unsubscribeFromMessages(props.chatId); 
    }; 
  }, []); 
  // ... 
}

on button click, welcome message displays, on another button click welcome message disappears, reflect on browser tab
- updating browser tab - ex. of side effect
- use useEffect hook to perform side effects, control useEffect function using dependency array
- set browser tab on initial render of component, do not update after
```
React.useEffect(() => {
	document.title = toggle ? "Welcome..." : "using useEffect..."
}, []);
```
- trigger useEffect every time toggle is changed
```
React.useEffect(() => {
	document.title = toggle ? "Welcome..." : "using useEffect..."
}, [toggle]);
```

practice assignment

log into the console a state variable, whenever the variable gets updated → use useEffect hook
useEffect hook accepts a callback function + dependency array