React and Next.js Review: Component Communication, Hooks, Routing, and Server Components

React builds UI. Next.js adds routing, layouts, server rendering, backend routes, and deployment conventions on top of React.

Component Communication

Parent-to-child communication usually happens through props.

function Child({ name }: { name: string }) {
  return <p>{name}</p>;
}

Child-to-parent communication usually happens through callback props.

function Child({ onChange }: { onChange: (value: string) => void }) {
  return <button onClick={() => onChange("next")}>Update</button>;
}

For cross-tree state, use Context or a state management library.

Common Hooks

useState manages component state.

const [count, setCount] = useState(0);

useEffect handles side effects such as data fetching or event subscriptions.

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

useMemo caches computed values, useCallback caches function references, and useRef stores DOM nodes or persistent values.

Next.js Routing and Layouts

In the App Router, folders define routes.

app/
  blog/
    page.tsx
  blog/[slug]/
    page.tsx

layout.tsx defines shared layout for nested routes.

Client and Server Components

Components are Server Components by default. Use "use client" when you need browser state, events, or DOM APIs.

"use client";
 
export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Backend Routes

Next.js can define API endpoints through Route Handlers.

export async function GET() {
  return Response.json({ ok: true });
}

The frontend can call these endpoints with fetch.