(un) mounting

You can't unmount a component from inside of it.
Local state in state and ref gets reset on mount. Start fresh. Let variable keeps value, outside of React scope.

useEffect(() => {
  console.log("Child mounts");
  return () => console.log("Child __ unmounting _!! lol");
}, []);

• let - let init
• ref.current - ref init
• state - state init

Navigate w/ React Router

If you navigate to a different route with React Router, if it's within the same subroute, the component is still mounted, it remains mounted.

useEffect(() => {
  return () => `RUNS NOT ONLY AT UNMOUNT`);
}, [actionData]);

This runs each time actionData changes + on unmount.
If object in dependency array, rerun when the reference changes. Also becomes undefined.
actionData each time gives you a new object (immutability). So it always reruns.

---

Passing an object into a child component.

// 1. defined outside the component, in function modified key. Still no run effect
const outsideObj = { location: "outside the function" };
outsideObj.location = Math.random() + ""; // in component body

// 2.
const memoObj = useMemo(() => ({ location: "in useMemo" }), []);

// 3. inside func component body
const bodyInlineObj = { location: "just in function body" };

0.36956244676656813

in useMemo

just in function body

Child has

useEffect(() => {
  console.log("useEffect body, obj > ", obj);
}, [obj]);