React Assignment – 9

Basic Questions

  1. Build a counter component where the button’s onClick increments, and memoize the button component using React.memo.
  2. Use useCallback to memoize a click handler that increments a counter. Verify child doesn’t re-render unnecessarily.
  3. Build a component that calculates a heavy sum of numbers. Optimize the calculation with useMemo.
  4. Create a list filter: type in an input and filter items using useMemo so filtering recalculates only when needed.
  5. Use React.lazy to lazy load an About component inside a router.
  6. Wrap the lazy component in Suspense with a fallback loading spinner.
  7. Create a reusable Button component that accepts label and onClick via props.
  8. Build a reusable InputField component with label, type, and placeholder as props.
  9. Build a controlled input form where the parent fully controls the input state.
  10. Build an uncontrolled form input using ref to read value instead of state.
  11. Create two components — Parent (updates frequently) and Child. Prevent Child from re-rendering using React.memo.
  12. Add a Profiler around a component tree and log its render timings in the console.
  13. Create a simple custom hook useCounter that provides count, increment, and decrement.
  14. Build an HOC that takes any component and adds a border around it.
  15. Build a compound component Tabs where TabList and TabPanel work together.
  16. Use automatic batching: update two separate states inside one handler, and ensure they batch in React 18+.
  17. Simulate a long computation (for loop) and memoize its result — show the efficiency with and without useMemo.
  18. Build a ToggleSwitch reusable component with on/off as props.
  19. Wrap three components in Suspense and show fallback until all have lazy-loaded.
  20. Memoize a derived value (fullName = first + last name) using useMemo.

Intermediate Questions

  1. Build a reusable Modal component using composition (header, body, footer as children).
  2. Create a custom hook useLocalStorage to get/set values inside local storage.
  3. Create a custom hook useLocalStorage to get/set local storage values.
  4. Build a higher-order component withLogger that logs props passed to wrapped components.
  5. Create a SearchableList that optimizes filtering with useMemo and avoids re-renders with useCallback.
  6. Use React Profiler to analyze performance of a large list rendering and log results to console.
  7. Build a reusable Form component that accepts render props for controlled form fields.
  8. Create a controlled CheckboxGroup with multiple checkboxes managed in parent.
  9. Create an uncontrolled FileUpload input, reading value using ref.
  10. Build a lazy-loaded Dashboard page with nested lazy child components.
  11. Implement a compound component-based Dropdown (Dropdown, DropdownToggle, DropdownMenu) pattern.
  12. Create an expensive calculator function inside a component and memoize its result with useMemo.
  13. Use useCallback to memoize event handlers for list items in a long list.
  14. Build a pagination component that is reusable and accepts totalPages, currentPage, onChangePage.
  15. Build an HOC withTheme that injects a theme prop into wrapped components.
  16. Create a custom hook useFormInput for managing form input state and validation.
  17. Optimize an image gallery using React.memo on individual ImageCard components.
  18. Create a reusable Table component with dynamic columns definition passed via props.
  19. Use Suspense to lazy load a UserProfile component and display fallback while loading.
  20. Implement a compound-slider component (Slider, SliderThumb, SliderTrack) where children communicate via shared context.

Advanced Questions

  1. Create a form builder using compound components (Form, Field, SubmitButton) where all state is managed in the parent.
  2. Build a fully reusable DataTable component: supports controlled sorting, uncontrolled row selection, and pagination.
  3. Create a custom hook useFetchWithCache that fetches data and caches it locally (similar to React Query lite).
  4. Develop an infinite scroll list with heavy computation per item, optimized via useMemo and React.memo.
  5. Create a dynamic ThemeProvider compound component (ThemeProvider, ThemeButton, ThemeText) that propagates theme through context.
  6. Build a performance-debugging playground: render 1000 items, analyze with Profiler, then optimize with useMemo + useCallback.
  7. Implement a lazy-loaded route group where multiple subpages load only when requested. Test fallback UI.
  8. Build an HOC withAuthCheck that restricts access to a wrapped component and redirects to Login if not authenticated.
  9. Demonstrate concurrent rendering + automatic batching: trigger multiple async state updates (e.g., setTimeout, fetch) and show React batches them.
  10. Implement concurrent updates (React 18 automatic batching) — simulate multiple async state updates and compare renders before/after batching.