React Assignment – 5

Basic Questions

Replace useState with useReducer for a counter app with INCREMENT and DECREMENT actions.
Write a reducer function that handles RESET action.
Compare a useReducer counter vs a useState counter in the same component.
Create a reducer that manages a toggle boolean (TOGGLE).
Use dispatch({type: “INCREMENT”}) from a button click.
Show initial state setup with useReducer({count: 0}).
Access a DOM input field using useRef and console.log its value on button click.
Set focus on an input field using ref.current.focus().
Store a timer setInterval ID in useRef and stop it with clearInterval.
Use useRef to count the number of renders without re-rendering.
Persist a value across renders without triggering re-render.
Store the previous count value using useRef.
Memoize an expensive calculation (for loop up to 1e7) with useMemo.
Compare expensive calculation with and without useMemo.
Use dependency array in useMemo to recalculate only when needed.
Memoize a derived value like sortedList based on a state array.
Pass a callback (handleClick) as prop to child component without useCallback and observe re-renders.
Optimize same callback with useCallback and confirm fewer re-renders.
Compare useCallback with useMemo by memoizing a function vs value.
Write a memoized event handler (useCallback) with dependency [count].

Create a reducer to manage a todo list (ADD_TODO, REMOVE_TODO).
Add an action TOGGLE_TODO to mark todos completed.
Manage a form state with multiple fields (name, email) using useReducer.
Implement lazy initialization in useReducer with an initializer function.
Create a cart state with ADD_ITEM, REMOVE_ITEM.
Compare code complexity of cart implemented with useState vs useReducer.
Use useRef to handle video play/pause control in a component.
Store a previous state value with useRef for comparison.
Handle focus between two input fields (focus moves from one input to another using ref).
Use useRef to persist scroll position across re-renders.
Animate an element by changing its style using ref.current.
Use useMemo to memoize a filtered list (filter items based on input).
Optimize rendering of a large list with a derived filtered value using useMemo.
Benchmark performance difference of list filtering with vs without useMemo.
Combine useMemo with React.memo child component for optimization.
Memoize a calculation that depends on multiple states.
Use useCallback inside a parent so child doesn’t unnecessarily re-render.
Compare two components: one with anonymous inline handler vs useCallback.
Use useCallback with React.memo together for preventing prop change re-renders.
Break down how useCallback improves performance in a counter with multiple buttons.

Build a complex form with useReducer, managing multiple fields, validations, and submit/reset actions.
Implement a state machine with useReducer (e.g., login states: idle, loading, success, error).
Manage nested state updates (blog posts with comments) immutably with useReducer.
Build a stopwatch app using useRef (store timer ID) + state for elapsed time.
Implement a debounced search using useRef to manage timer across renders.
Build a large table that sorts with useMemo and re-renders rows efficiently using useCallback.
Implement a search + filter system where filtering uses useMemo and event handlers are optimized with useCallback.
Compare performance in React Profiler with and without useMemo + useCallback.
Build a Todo App with filtering & memoization: