Composition path · React · 56 layers
React: HOC, hooks, and the mount pipeline withAuth wraps Page. Page renders Form and Profile. The contract — hooks, state, props — links into Form. Pan down: the rest of the hooks, then lifecycle as a function pipeline and as class methods, mapped across. Click Form, Type "H", or DidMount vs useEffect.
Reset Click a shape or a question
Questions this tree answers
What are props? Props vs arguments Mutate props? Why immutable? children Composition vs inheritance Parent → child Child → parent Siblings Prop drilling When it hurts Default props Render props Higher-Order Component What is state? Props vs state How useState works Why not a variable? Immediate update? State batching Don’t mutate state Update an object Update an array Functional update Derived state Redundant state Event handling Synthetic events Pass arguments Type "H" Stack vs Fiber Object spread Reconcile + commit When is Object A collected? Hitesh Debounce Rules of hooks useEffect Effect deps Effect cleanup Layout vs effect useRef Ref vs state useMemo useCallback useContext useReducer Concurrent hooks Custom hooks Function lifecycle Strict Mode Class lifecycle DidMount vs useEffect DidUpdate vs useEffect WillUnmount vs cleanup
Typing · one object per key · input is not debounced
∅ H Hi Hit Hite Hites Hitesh
What React is
UI = f(data) Data down, events up Nest, don’t extend Lift state Share without subclassing State is owned memory This render is frozen Replace, don’t mutate Derive, don’t duplicate Pass a function later One JS stack Fiber holds hooks Reachable vs eligible Call order is identity Effects are not render Refs do not re-render Function lifecycle is a pipeline Class names, same pipeline