React Theory

// ❌ Bad: index as key
{items.map((item, index) => (
  <Item key={index} {...item} />
))}
// Problem: inserting at beginning = all keys shift
// React re-renders everything!

// ✅ Good: stable unique id
{items.map(item => (
  <Item key={item.id} {...item} />
))}

// Each fiber node represents a unit of work
// Fiber node structure (simplified):
const fiberNode = {
  type: 'div',         // element type
  key: null,
  stateNode: domNode, // actual DOM node

  // Tree structure (linked list — not tree)
  child: firstChildFiber,
  sibling: nextSiblingFiber,
  return: parentFiber,

  // Work
  pendingProps: {},
  memoizedProps: {},
  memoizedState: {},

  // Effect
  effectTag: 'UPDATE',
  nextEffect: null,
};

// React processes one fiber at a time,
// yielding to browser between frames using
// requestIdleCallback / MessageChannel

// useEffect — dependency array patterns
useEffect(() => {
  // runs after every render
});

useEffect(() => {
  // runs only on mount
  return () => cleanup(); // runs on unmount
}, []);

useEffect(() => {
  // runs when a or b changes
  const sub = api.subscribe(a);
  return () => sub.unsubscribe(); // cleanup
}, [a, b]);

// useCallback vs useMemo
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]); // memoizes the function itself

const sortedList = useMemo(() => {
  return list.sort((a, b) => a.name.localeCompare(b.name));
}, [list]); // memoizes the computed value

// useRef — two uses
const inputRef = useRef(null); // DOM ref
useEffect(() => { inputRef.current?.focus(); }, []);

const countRef = useRef(0); // mutable value, no re-render
const handleClick2 = () => { countRef.current++; }; // doesn't trigger re-render

// useReducer — for complex state
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    case 'SET': return { count: action.payload };
    default: return state;
  }
};

const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'INCREMENT' });
dispatch({ type: 'SET', payload: 10 });

// React.memo — prevents re-render if props same
const ExpensiveChild = React.memo(({ data, onUpdate }) => {
  return <div>{/* expensive render */}</div>;
}, (prevProps, nextProps) => {
  // Custom comparison: return true to skip re-render
  return prevProps.data.id === nextProps.data.id;
});

// ❌ Problem: new function on every parent render
function Parent() {
  const [count, setCount] = useState(0);
  // This creates a new function every render!
  const handleUpdate = () => updateData();
  return <ExpensiveChild onUpdate={handleUpdate} />;
  // ExpensiveChild re-renders every time even though memo!
}

// ✅ Fix with useCallback
function Parent() {
  const [count, setCount] = useState(0);
  const handleUpdate = useCallback(() => updateData(), []);
  return <ExpensiveChild onUpdate={handleUpdate} />;
}

// Code splitting
const HeavyPage = React.lazy(() => import('./HeavyPage'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <HeavyPage />
    </Suspense>
  );
}

// useTransition for filtering large lists
function SearchResults() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    setQuery(e.target.value); // urgent: update input immediately
    startTransition(() => {
      setResults(filterResults(e.target.value)); // non-urgent
    });
  }

  return (
    <>
      <input onChange={handleChange} value={query} />
      {isPending ? <Spinner /> : <ResultList results={results} />}
    </>
  );
}

// Creating and using context
const ThemeContext = createContext('light');
const UserContext = createContext(null);

// Provider — wrap once at appropriate level
function App() {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState(null);

  // ⚠️ Problem: new object on every render!
  // return <UserContext.Provider value={{ user, setUser }}>

  // ✅ Memoize context value
  const userValue = useMemo(() => ({ user, setUser }), [user]);

  return (
    <ThemeContext.Provider value={theme}>
      <UserContext.Provider value={userValue}>
        <Router />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

// Consumer — custom hook pattern
function useTheme() {
  const ctx = useContext(ThemeContext);
  if (ctx === undefined) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return ctx;
}

// Context splitting to prevent unnecessary re-renders
// ✅ Split read and write contexts
const CountStateContext = createContext(0);
const CountDispatchContext = createContext(null);

function Counter() {
  const count = useContext(CountStateContext); // only re-renders on count change
  const dispatch = useContext(CountDispatchContext); // never re-renders (dispatch is stable)
  return <button onClick={() => dispatch('INC')}>{count}</button>;
}

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    // Update state to show fallback UI
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // Log to error reporting service
    logErrorToService(error, errorInfo.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || (
        <div>
          <h2>Something went wrong.</h2>
          <button onClick={() => this.setState({ hasError: false })}>
            Try again
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// Usage
<ErrorBoundary fallback={<ErrorPage />}>
  <UserProfile />
</ErrorBoundary>

// react-error-boundary library (hooks-based)
import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

<ErrorBoundary FallbackComponent={ErrorFallback} onError={logError}>
  <Component />
</ErrorBoundary>

// Suspense for code splitting
const Profile = lazy(() => import('./Profile'));

<Suspense fallback={<ProfileSkeleton />}>
  <Profile userId={id} />
</Suspense>

// Suspense for data fetching (React 18+)
// With React Query:
function Posts() {
  const { data } = useSuspenseQuery({ queryKey: ['posts'], queryFn: fetchPosts });
  return <PostList posts={data} />; // no loading state needed!
}

<Suspense fallback={<PostsSkeleton />}>
  <Posts />
</Suspense>

// Nested Suspense boundaries
<Suspense fallback={<PageSkeleton />}>
  <Header />
  <Suspense fallback={<FeedSkeleton />}>
    <Feed />
  </Suspense>
  <Suspense fallback={<SidebarSkeleton />}>
    <Sidebar />
  </Suspense>
</Suspense>

// useTransition — mark updates as non-urgent
function TabContainer() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab); // don't block UI during expensive tab switch
    });
  }

  return (
    <>
      <TabButton onClick={() => selectTab('home')}>Home</TabButton>
      <TabButton onClick={() => selectTab('analytics')}>Analytics</TabButton>
      {isPending ? <Spinner /> : <TabPanel tab={tab} />}
    </>
  );
}

// Custom hooks extract stateful logic

// 1. useFetch — data fetching
function useFetch(url) {
  const [state, setState] = useState({
    data: null, loading: true, error: null
  });

  useEffect(() => {
    let cancelled = false;
    setState({ data: null, loading: true, error: null });

    fetch(url)
      .then(r => r.json())
      .then(data => {
        if (!cancelled) setState({ data, loading: false, error: null });
      })
      .catch(error => {
        if (!cancelled) setState({ data: null, loading: false, error });
      });

    return () => { cancelled = true; }; // cleanup — prevents stale state
  }, [url]);

  return state;
}

// 2. useLocalStorage — persisted state
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setStoredValue = useCallback((newValue) => {
    setValue(newValue);
    window.localStorage.setItem(key, JSON.stringify(newValue));
  }, [key]);

  return [value, setStoredValue];
}

// 3. useDebounce
function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

// 4. useIntersectionObserver — infinite scroll / lazy load
function useIntersectionObserver(ref, options = {}) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => setIntersecting(entry.isIntersecting),
      options
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [ref, options]);

  return isIntersecting;
}

// 1. Higher-Order Component (HOC)
function withAuth(Component) {
  return function AuthenticatedComponent(props) {
    const { user } = useAuth();
    if (!user) return <Redirect to="/login" />;
    return <Component {...props} user={user} />;
  };
}
const ProtectedDashboard = withAuth(Dashboard);

// 2. Render Props
function Mouse({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const handleMove = (e) => setPosition({ x: e.clientX, y: e.clientY });
  return <div onMouseMove={handleMove}>{render(position)}</div>;
}

<Mouse render={({ x, y }) => <Cat x={x} y={y} />} />

// 3. Compound Components (most modern)
const Tabs = ({ children, defaultTab }) => {
  const [activeTab, setActiveTab] = useState(defaultTab);
  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabsContext.Provider>
  );
};

Tabs.List = ({ children }) => <div role="tablist">{children}</div>;
Tabs.Tab = ({ id, children }) => {
  const { activeTab, setActiveTab } = useContext(TabsContext);
  return (
    <button
      role="tab"
      aria-selected={activeTab === id}
      onClick={() => setActiveTab(id)}>
      {children}
    </button>
  );
};
Tabs.Panel = ({ id, children }) => {
  const { activeTab } = useContext(TabsContext);
  return activeTab === id ? <div role="tabpanel">{children}</div> : null;
};

// Usage — feels like native HTML
<Tabs defaultTab="profile">
  <Tabs.List>
    <Tabs.Tab id="profile">Profile</Tabs.Tab>
    <Tabs.Tab id="settings">Settings</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel id="profile"><ProfileContent /></Tabs.Panel>
  <Tabs.Panel id="settings"><SettingsContent /></Tabs.Panel>
</Tabs>

// Server Component (default in Next.js App Router)
// app/users/page.tsx
async function UsersPage() {
  // Direct DB access! No API needed
  const users = await db.query('SELECT * FROM users');

  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

// Client Component — 'use client' directive
'use client';
import { useState } from 'react';

function LikeButton({ initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  return (
    <button onClick={() => setLikes(l => l + 1)}>
      ❤️ {likes}
    </button>
  );
}

// Mix: pass server data as props to client components
async function PostPage({ id }) {
  const post = await db.posts.findById(id); // server
  return (
    <article>
      <h1>{post.title}</h1>
      <LikeButton initialLikes={post.likes} /> {/* client */}
    </article>
  );
}

// Controlled — React owns the value
function ControlledForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    console.log({ name, email }); // always up to date
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}            // controlled: value from state
        onChange={e => setName(e.target.value)}
        placeholder="Name"
      />
      <input
        value={email}
        onChange={e => setEmail(e.target.value)}
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

// Uncontrolled — DOM owns the value (use refs to access)
function UncontrolledForm() {
  const nameRef = useRef(null);
  const fileRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    console.log(nameRef.current.value); // read on submit
    console.log(fileRef.current.files[0]); // file input always uncontrolled
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} defaultValue="Alice" placeholder="Name" />
      <input ref={fileRef} type="file" />
      <button type="submit">Submit</button>
    </form>
  );
}

function Parent() {
  const [count, setCount] = useState(0); // state — owned by Parent

  return (
    <Child
      count={count}              // prop passed to Child
      onIncrement={() => setCount(c => c + 1)} // prop: callback
    />
  );
}

function Child({ count, onIncrement }) { // receives props
  // ❌ Cannot modify props: count = 5; (error or no effect)
  // ✅ Must call callback to request parent update
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={onIncrement}>+1</button>
    </div>
  );
}

// Lifting state up — when siblings need shared state
function App() {
  const [query, setQuery] = useState(''); // lifted to common ancestor

  return (
    <>
      <SearchInput value={query} onChange={setQuery} />
      <SearchResults query={query} />
    </>
  );
}

// ❌ STALE CLOSURE BUG
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      // 'count' is captured at 0 (stale!)
      console.log(count); // always logs 0
      setCount(count + 1); // always sets to 1!
    }, 1000);
    return () => clearInterval(interval);
  }, []); // empty deps — callback never updates
}

// ✅ Fix 1: Include dependency
useEffect(() => {
  const interval = setInterval(() => {
    setCount(count + 1); // fresh count each interval
  }, 1000);
  return () => clearInterval(interval);
}, [count]); // re-creates interval when count changes

// ✅ Fix 2: Functional update (best for intervals/timers)
useEffect(() => {
  const interval = setInterval(() => {
    setCount(prev => prev + 1); // always gets fresh prev value
  }, 1000);
  return () => clearInterval(interval);
}, []); // no dependency needed!

// ✅ Fix 3: useRef to always have fresh value
const countRef = useRef(count);
useEffect(() => { countRef.current = count; }, [count]);

useEffect(() => {
  const interval = setInterval(() => {
    console.log(countRef.current); // always fresh!
  }, 1000);
  return () => clearInterval(interval);
}, []);

// Modern Redux Toolkit (RTK) — recommended approach
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Slice — actions + reducer in one
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0, status: 'idle' },
  reducers: {
    increment: (state) => { state.value += 1; }, // Immer allows "mutation"
    decrement: (state) => { state.value -= 1; },
    incrementBy: (state, action) => { state.value += action.payload; },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => { state.status = 'loading'; })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = 'idle';
        state.user = action.payload;
      });
  }
});

// Async thunk — for API calls
const fetchUser = createAsyncThunk('user/fetch', async (id) => {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
});

// In component
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    <>
      <p>{count}</p>
      <button onClick={() => dispatch(counterSlice.actions.increment())}>+</button>
      <button onClick={() => dispatch(fetchUser(1))}>Fetch User</button>
    </>
  );
}