React Refresher

Run, inspect, and modify npm scripts and dependencies in a Vite React TypeScript project.

Transform collections with map, filter, find, and reduce for common interface requirements.

Update arrays and objects without mutation by using destructuring and spread syntax.

Organize application code with named and default ES module imports and exports.

Handle asynchronous operations with promises, async/await, and try/catch.

Model React-relevant data with TypeScript type aliases, interfaces, unions, and optional properties.

Type function parameters and return values and narrow union types safely.

Use a basic Git feature-branch workflow to commit and merge a code change.

Structure an application page with appropriate semantic HTML elements.

Associate labels, instructions, and controls in an accessible HTML form.

Apply CSS selectors, the cascade, and the box model to style an interface component.

Build one-dimensional component layouts using CSS Flexbox.

Build two-dimensional page structures using CSS Grid.

Adapt component layouts to different viewport sizes using media queries and fluid units.

Inspect and modify page structure and styles with browser developer tools.

Define and use TypeScript-typed props for a React function component.

Compose typed React components through children and element props.

Render typed collections with stable keys and conditional content.

Type React mouse, keyboard, change, and submit event handlers.

Manage primitive and object state with typed useState calls.

Perform immutable updates to nested state and array items.

Distinguish stored state from values that should be derived during rendering.

Represent empty, loading, error, and success interface states with conditional rendering.

Lift state to a common parent and update it through typed callback props.

Build controlled text, select, checkbox, and radio inputs.

Implement synchronous form validation and display accessible error messages.

Distinguish rendering logic, event-driven logic, and synchronization effects.

Synchronize a component with an external system using useEffect and a correct dependency list.

Clean up timers, subscriptions, and in-flight asynchronous work in an effect.

Replace an unnecessary effect with derived state or event-handler logic.

Synchronize selected state with localStorage safely.

Use useRef for DOM access and mutable values that do not trigger rendering.

Diagnose effect behavior under React Strict Mode.

Extract reusable stateful behavior into a typed custom hook.

Configure a React Router route tree with layout, index, and nested routes.

Navigate with links and read path parameters safely in routed components.

Store shareable filters and view options in URL search parameters.

Provide not-found and route-level error interfaces.

Organize routes, components, hooks, and types by application feature.

Build an accessible responsive application shell with navigation.

Interpret REST methods, HTTP status codes, request headers, and JSON responses.

Inspect API requests and responses with the browser Network panel.

Parse unknown API data with a Zod schema before treating it as typed application data.

Render manually fetched data with explicit loading, error, empty, and success states.

Configure TanStack Query and retrieve server data with stable query keys.

Create server mutations and invalidate affected cached queries.

Drive filtered or paginated queries from URL state and query keys.

Implement an optimistic update with rollback on mutation failure.

Build a typed form with React Hook Form registration and submission.

Define a Zod validation schema and infer its TypeScript form-data type.

Present schema validation errors with accessible descriptions and focus behavior.

Connect reusable custom input components to React Hook Form.

Submit form data through a TanStack Query mutation and represent submission states.

Populate, reset, and submit an edit form using asynchronously loaded defaults.

Map server-side validation failures to field-level and form-level feedback.

Warn users about unsaved form changes using form dirty state and navigation guards.

Classify application data as local, URL, server, or shared client state.

Model related state transitions with a typed useReducer reducer and actions.

Expose shared state through a typed Context provider and custom consumer hook.

Reduce avoidable context re-renders by separating state and dispatch responsibilities.

Create a Zustand store with typed actions and narrowly selected state.

Persist and rehydrate selected client state without overwriting fresher server data.

Select an appropriate state location and library for a given feature scenario.

Choose composition instead of prop proliferation when designing a reusable component.

Design a component with a clear controlled or uncontrolled state API.

Implement a generic typed list or table component with TypeScript generics.

Build compound components that share internal state through context.

Render a modal through a portal and restore focus when it closes.

Implement keyboard interaction and focus management for an accessible tabs widget.

Apply appropriate accessible names, states, and relationships to a custom component.

Audit and correct common accessibility issues with automated checks and keyboard testing.

Test a pure TypeScript function with Vitest assertions and parameterized cases.

Test rendered behavior with React Testing Library queries based on accessible roles.

Simulate realistic user interactions with user-event.

Mock REST API behavior with Mock Service Worker.

Test asynchronous loading, success, and error interface states.

Build reusable test renderers for Router, Query Client, and Context providers.

Write a focused integration test for a form-driven server mutation.

Create a Playwright end-to-end smoke test for a critical user journey.

Use React Developer Tools Profiler to locate an avoidable rendering bottleneck.

Diagnose unnecessary component renders caused by unstable props or broad subscriptions.

Apply React.memo, useMemo, or useCallback only to a measured bottleneck.

Use useTransition or useDeferredValue to keep an expensive interface update responsive.

Lazy-load a route and display an appropriate Suspense fallback.

Catch render failures with an error boundary and provide a recovery action.

Compare performance measurements before and after an optimization.

Integrate login, logout, and current-user endpoints using a secure cookie-based session while relying on the server for authorization decisions.

Restrict navigation by authentication state while preserving an intended destination.

Render role-aware interface controls without exposing secrets or treating hidden controls as authorization.

Prevent cross-site scripting by avoiding or sanitizing unsafe HTML rendering.

Configure typed environment variables for development and production builds.

Run linting, type checking, tests, and a production build as a release-quality gate.

Deploy a production build and verify routing, API configuration, and failure behavior.