React Real-World Use Cases

RCT-101 Fix Typing Lag in Large Form

High Priority Performance

Description

Users are reporting significant lag when typing in the "Comments" field of the main dashboard. The dashboard contains a heavy chart component that seems to re-render on every keystroke.

Acceptance Criteria

Typing must be instant (60fps).
The Chart component must NOT re-render when typing in the input.

👨‍💻 Senior Developer Solution

Strategy: The state is likely lifted too high, causing the entire parent to re-render. We can push the state down or use `React.memo`.

// ❌ Bad Code
function Dashboard() {
    const [text, setText] = useState('');
    return (
        <>
            <input value={text} onChange={e => setText(e.target.value)} />
            <HeavyChart /> {/* Re-renders on every keystroke! */}
        </>
    );
}

// ✅ Good Code (Push State Down)
function CommentInput() {
    const [text, setText] = useState('');
    return <input value={text} onChange={e => setText(e.target.value)} />;
}

function Dashboard() {
    return (
        <>
            <CommentInput />
            <HeavyChart /> {/* Never re-renders when typing! */}
        </>
    );
}

Key Takeaway: Keep state as close to where it's used as possible. "Push State Down" is often better than `memo`.

RCT-205 Implement useDebounce Hook

Medium Feature

Description

We need to implement a search bar that queries the API. Currently, it fires a request on every keystroke, spamming the server. We need to wait until the user stops typing for 500ms.

Acceptance Criteria

Create a generic `useDebounce` hook.
API call should only fire 500ms after last keystroke.

👨‍💻 Senior Developer Solution

Strategy: Use `useEffect` and `setTimeout` to delay the value update.

import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number): T {
    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        // Cleanup function runs if value changes before delay is over
        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);

    return debouncedValue;
}

// Usage
const debouncedSearch = useDebounce(searchTerm, 500);
useEffect(() => {
    if (debouncedSearch) api.search(debouncedSearch);
}, [debouncedSearch]);

Key Takeaway: Cleanup functions in `useEffect` are crucial for cancelling pending timers or requests.

RCT-310 Global Theme Management

Medium Architecture

Description

We are passing `theme="dark"` prop through 5 layers of components just to reach a button. This is unmaintainable.

Acceptance Criteria

Implement a `ThemeProvider`.
Allow any component to access `theme` and `toggleTheme`.
Persist preference in localStorage.

👨‍💻 Senior Developer Solution

Strategy: Use React Context API to broadcast state globally.

const ThemeContext = createContext({ theme: 'light', toggle: () => {} });

export function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');
    
    const toggle = () => {
        setTheme(prev => prev === 'light' ? 'dark' : 'light');
    };

    return (
        <ThemeContext.Provider value={{ theme, toggle }}>
            <div className={theme}>{children}</div>
        </ThemeContext.Provider>
    );
}

// Usage in deep component
function ThemedButton() {
    const { theme, toggle } = useContext(ThemeContext);
    return <button onClick={toggle}>Current: {theme}</button>;
}

Key Takeaway: Context is perfect for global "app state" like themes, user sessions, and language settings. Avoid it for high-frequency updates.