Why are my React components constantly re-rendering even with memo and useCallback, desperate for help!

i'm totally stuck here, been trying to figure out why my react components are constantly re-rendering for like, hours now.

1. New Object/Array References: If you're passing objects or arrays as props that are created inline (e.g., <Child data={{ id: 1 }} /> or <Child list={[]} />), a new reference is created on every parent render, causing `React.memo` to see a "new" prop and re-render the child, regardless of whether the internal values are the same. Ensure such props are memoized using `useMemo` in the parent.
2. Unstable Function References: Similar to objects, if you're passing functions down to children that aren't wrapped in `useCallback`, a new function reference is created on each parent render, bypassing `React.memo`'s shallow comparison.
3. Context Value Changes: If a component consumes a context using `useContext`, it will re-render whenever the context value itself changes. Even if only a small part of the context object changes, all consumers will re-render unless you split your context into smaller, more granular pieces or use a selector pattern.
4. Mutable State: Directly mutating state objects or arrays (e.g., `state.array.push(item)`) instead of creating new ones (e.g., `[...state.array, item]`) can lead to unexpected behavior and re-renders because React's shallow comparison might not detect a change in reference.
5. Incorrect Dependency Arrays: Missing dependencies in `useCallback` or `useMemo` can lead to stale closures, while over-specifying dependencies can cause unnecessary re-creation of memoized values or functions.

MD Alamgir Hossain Nahid, OMG this is exactly the kind of detailed breakdown I needed! The points about new object/array references and context changes especially hit home, I think I see exactly where I've been going wrong. Seriously appreciate you taking the time to explain all this so clearly...