React JS

Create and run a React application with Vite.

Translate a simple JSX expression into the DOM output it produces.

Write JSX using expressions, attributes, fragments, and embedded JavaScript values.

Implement a function component with a single clear responsibility.

Pass data from a parent component to a child through props.

Compose components by passing nested content through children.

Render a collection with map and assign stable keys to its items.

Handle user events with React event handlers.

Render different interface branches with conditional rendering.

Manage a primitive piece of local component state with useState.

Use a functional state update when the next value depends on the previous value.

Update object state without mutation.

Update array state without mutation.

Calculate derived values during rendering instead of storing duplicate state.

Implement a controlled form input.

Lift shared state to the nearest common parent.

Apply the Rules of Hooks when structuring components.

Use an Effect to synchronize a component with an external system.

Specify accurate dependencies for an Effect.

Implement Effect cleanup for subscriptions, timers, or external resources.

Explain why an Effect may run twice during development under Strict Mode.

Use a ref to access and focus a DOM element.

Extract reusable stateful logic into a custom Hook.

Use React Developer Tools to inspect component state and diagnose re-renders.

Configure a React Router route tree with a shared layout.

Implement client-side navigation without full-page reloads.

Read dynamic route parameters in a routed component.

Represent filters or pagination with URL search parameters.

Fetch JSON data from an HTTP API in a component.

Cancel an obsolete request with AbortController.

Render distinct loading, error, empty, and success states for a request.

Handle unsuccessful HTTP responses without treating them as successful data.

Model related state transitions with useReducer.

Implement a pure reducer that returns immutable state.

Provide shared data to a component subtree with Context.

Separate state and dispatch contexts to reduce unnecessary subscriptions.

Combine a reducer and Context into a reusable application store.

Configure a Redux Toolkit store for complex client state.

Implement and consume a Redux Toolkit slice with selectors and actions.

Choose among local state, lifted state, Context, Redux, and server-state caching for a given scenario.

Configure a TanStack Query client in a React application.

Retrieve server data with useQuery.

Design query keys that uniquely identify cached data.

Choose a stale-time policy for a server-data query.

Update server data with a mutation and invalidate affected queries.

Implement an optimistic update with rollback on failure.

Build a form with React Hook Form.

Declare validation rules and present accessible field-level errors.

Define component boundaries that separate data orchestration from presentation.

Design a reusable component API using composition rather than configuration-heavy props.

Implement a reusable component that supports a controlled usage mode.

Render a dialog through a portal.

Manage initial focus, focus return, and Escape-key behavior in a dialog.

Use semantic HTML and accessible names before adding ARIA attributes.

Control state preservation or reset through component position and keys.

Catch rendering failures with an Error Boundary and display a recovery interface.

Configure Vitest and React Testing Library for a React project.

Query rendered elements by accessible role and name.

Test a user interaction with user-event.

Test an interface that updates asynchronously.

Mock an HTTP API at the network boundary with Mock Service Worker.

Test a routed component with its required providers.

Write an end-to-end browser test for a critical user journey with Playwright.

Select unit, integration, or end-to-end coverage for a stated risk.

Use the React Profiler to identify an avoidable rendering bottleneck.

Prevent an expensive child re-render with React.memo when measurement justifies it.

Memoize an expensive calculation with useMemo.

Stabilize a callback with useCallback when referential identity matters.

Split a route or feature bundle with lazy and Suspense.

Keep an urgent interaction responsive with useTransition.

Defer a non-urgent derived interface with useDeferredValue.

Refactor an unnecessary Effect into event-driven or render-time logic.

Distinguish build-time client configuration from runtime server secrets.

Prevent cross-site scripting when rendering user-controlled content.

Explain secure browser-session options for authenticated API requests.

Distinguish client-side route gating from server-side authorization.

Create and inspect an optimized production build.

Configure static hosting to support client-side route fallbacks.

Create a continuous-integration workflow that runs checks, tests, and a production build.

Capture production rendering errors with source maps and an error-monitoring service.

Convert a user story into testable acceptance criteria for a React feature.

Draw the component hierarchy and data flow for a React feature.

Assign state ownership for a feature without duplicating its source of truth.

Review a component for Hook-rule violations, stale closures, and mutation bugs.

Explain React rendering, reconciliation, and component identity using a concrete example.

Defend a state-management choice for an interview-style application scenario.

Diagnose a React performance scenario using evidence rather than premature memoization.

Present the architecture, testing strategy, accessibility choices, and production trade-offs of a React application.