UI Update Cycle

React follows a simple but powerful loop. This cycle ensures the UI always reflects the latest state of the application.

Common React Hooks

Hook	Purpose
useState	Manage component state
useReducer	Manage complex state logic
useRef	Persist mutable values without re-render
useEffect	Handle side-effects
use	Consume async resources (experimental)

Component Lifecycle

React components go through three main phases:

useEffect(() => {
    // your side-effect code here.
    // this is where you can interact with browser APIs for example
    doSomeThing()
    return function cleanup() {
        // if you need to clean up after your side-effect (like unsubscribe from an
        // event), you can do it here
        doSomeCleanup()
    }
}, [
    // this is where dependencies of your useEffect callback go
    // we'll talk about this in depth in a future exercise.
    // In this exercise, we'll just leave it as an empty array
    dep1,
    dep2,
])