The screen fetched the same data three times on mount
Header, sidebar, and main panel each called /profile in useEffect. Waterfalls stacked. The UI flickered between loading states.
Components grew faster than owners
The feature grew by adding components, not by deciding who owned shared data.
Local state was fine for toggles. Shared account data was not local.
Three fetches, one profile
Render and orchestration lived in the same components. Every child could fetch. Nobody could say which copy was authoritative.
Name the state owner
Name the owner of each piece of state. Lift shared data to one hook or parent.
Keep components thin enough to read in one pass.
Feature folder boundary
function useProfile() {
return useQuery({ queryKey: ['profile'], queryFn: fetchProfile });
}
// Children receive data; they do not fetchFix ownership before polish
Most frontend bugs are state ownership bugs. Fix the boundary before polishing the UI.