useEffect, Callbacks, and How They Work Together

Short session but genuinely important stuff. These two concepts — useEffect and callbacks — are everywhere in React and JavaScript. Understanding them properly changes how you read code. useEffect — When Does It Actually Run? Simple and worth stating clearly: useEffect runs after every render of the component it lives in. That's its default behaviour — component renders, effect fires. No magic, no mystery. You control when it runs using the dependency array: useEffect(() => { ... }, []); — runs only once, on first render. useEffect(() => { ... }, [value]); — runs whenever value changes. useEffect(() => { ... }); — runs after every single render, no restrictions. That's the whole mental model. Render happens first, then the effect. Always in that order. Callbacks — A Function That Waits Its Turn A callback is just a function you hand to another function and say "you decide when to call this." The flow is always the same: main function runs first → callback runs inside it, wherever it wa