← Back to Tutorials Chapter 13

Practice & Resources

This chapter consolidates everything from the tutorial into a quick reference guide, a cheatsheet, study resources, and interview preparation material. Bookmark this page for daily practice.

React Quick Reference

Pattern	Code
Functional component	const Comp = ({ name }) => <h1>{name}</h1>;
useState	const [count, setCount] = useState(0);
useEffect	useEffect(() => { ... }, [deps]);
useRef	const ref = useRef(null); ref.current.focus();
Conditional render	{isLogged ? <Dash /> : <Login />}
List rendering	items.map(i => <Item key={i.id} />)
Event handling	<button onClick={() => handle()}>Click</button>

Hooks Summary

• useState — local component state
• useEffect — side effects (data fetching, subscriptions, DOM manipulation)
• useContext — consume a React context
• useReducer — complex state logic with reducer functions
• useCallback — memoize a callback function
• useMemo — memoize a computed value
• useRef — mutable ref to DOM element or value
• useImperativeHandle — customize exposed ref methods
• useLayoutEffect — synchronous effect after DOM mutations
• useDebugValue — label custom hooks in DevTools
• useTransition — mark state update as non-urgent
• useDeferredValue — defer re-rendering of a value
• useId — generate unique IDs for accessibility
• useSyncExternalStore — subscribe to external stores

Axios Cheatsheet

import axios from "axios";

// GET
const { data } = await axios.get("/api/users");

// POST
await axios.post("/api/users", { name, email });

// PUT
await axios.put("/api/users/1", { name });

// DELETE
await axios.delete("/api/users/1");

// Interceptors
axios.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// Error handling
try {
  const { data } = await axios.get("/api/data");
} catch (err) {
  if (err.response?.status === 404) { /* not found */ }
}

Useful Resources

• React Docs — react.dev (official docs with interactive examples)
• Awesome React — curated list of React tools and resources on GitHub
• React TypeScript Cheatsheet — patterns for typing React components with TypeScript
• React DevTools — browser extension for profiling and inspecting component trees
• Discussion Forums: Reactiflux Discord, Stack Overflow, Reddit r/reactjs

8-Week Study Plan

1. Week 1-2: JSX, components, props, useState, conditional rendering, lists
2. useEffect, data fetching, custom hooks
3. Forms, refs, context, useReducer
4. React Router, navigation patterns
5. State management (Redux Toolkit or Zustand)
6. Testing, performance, accessibility
7. Build a capstone project + mock interviews

Interview Prep Questions

• What is the virtual DOM and how does React use it?
• Explain the difference between controlled and uncontrolled components.
• How does the useEffect dependency array work?
• What is prop drilling and how can you avoid it?
• Explain the Flux pattern and how Redux implements it.
• What is the purpose of keys in React lists?
• How do you optimize performance in a React app?
• What are error boundaries and what are their limitations?
• Explain the difference between useMemo and useCallback.
• How does React.lazy help with code splitting?

Glossary of Terms

Component

A reusable, self-contained piece of UI, written as a function or class.

JSX

Syntax extension for JavaScript that looks like HTML, transpiled to React.createElement calls.

Virtual DOM

An in-memory representation of the real DOM. React diffs it against the updated version to apply minimal DOM patches.

Hook

Functions that let you use React features (state, effects, refs) inside functional components.

Props

Read-only data passed from parent to child components.

State

Data that changes over time and triggers re-renders when updated.