State

In the previous tutorial, you learned useRef, useMemo, and useCallback. Now let’s solve a common React problem: prop drilling. The Prop Drilling Problem Prop drilling happens when you pass data through many layers of components that don’t actually need it — just to get it to a deeply nested component. // Data needs to go from App → Layout → Header → UserMenu function App() { const [user, setUser] = useState<User | null>({ name: "Alex" }); return <Layout user={user} onLogout={() => setUser(null)} />; } function Layout({ user, onLogout }: LayoutProps) { return <Header user={user} onLogout={onLogout} />; // Layout doesn't use user, just passes it down } function Header({ user, onLogout }: HeaderProps) { return <UserMenu user={user} onLogout={onLogout} />; // Header doesn't use user either } function UserMenu({ user, onLogout }: UserMenuProps) { return <button onClick={onLogout}>{user.name}</button>; } This becomes painful with 5+ levels. The Context API solves this. ...

In the previous tutorial, you learned conditional rendering. Now let’s go deeper into useState and useEffect — the two hooks you will use in almost every React component. useState In Depth You have already seen useState basics. Let’s cover the advanced patterns. Lazy Initialization If the initial state value is expensive to compute, pass a function: // ❌ Runs getInitialTodos() on every render const [todos, setTodos] = useState(getInitialTodos()); // ✅ Runs getInitialTodos() only once const [todos, setTodos] = useState(() => getInitialTodos()); The function is only called on the first render. ...

In the previous tutorial, you learned JSX. Now let’s look at the two most important concepts in React: props and state. Props pass data into a component. State is data that the component manages internally. Understanding when to use each one is key to writing good React code. Props: Passing Data Into Components Props (short for “properties”) are how you pass data from a parent component to a child component. Props flow one way: from parent to child. ...

This is the most important tutorial in the entire series. If you don’t understand state, nothing in Compose will make sense. If you do understand it, everything clicks. State is the reason the login form from the previous tutorial worked. It is the reason buttons can toggle, text fields can update, and screens can change. Without state, your UI is frozen — it shows something once and never changes. Let’s fix that. ...