React Assignment – 6

Basic Questions

  1. Replace a useEffect with useLayoutEffect and log when each runs to see timing difference.
  2. Use useLayoutEffect to measure DOM element width immediately after render.
  3. Create a component where text flashes briefly without useLayoutEffect, then fix with it.
  4. Compare console logs between useEffect and useLayoutEffect.
  5. Create a custom input component using forwardRef.
  6. Expose an input’s .focus() method using useImperativeHandle.
  7. Add a custom method clear() inside an input component via useImperativeHandle.
  8. Demonstrate that without useImperativeHandle, parent cannot call a child method.
  9. Create unique ids for multiple input fields using useId.
  10. Use useId to associate <label> with <input> for accessibility.
  11. Generate IDs in multiple components and show they remain unique across render cycles.
  12. Use useTransition to show “Loading…” while filtering a large list.
  13. Make a button that triggers expensive state update inside a transition for smoother UI.
  14. Compare rendering with and without useTransition.
  15. Use useDeferredValue to defer rendering a large filtered list.
  16. Display a search box where input updates immediately but results render deferred.
  17. Create a basic external store (counter object) and connect it with useSyncExternalStore.
  18. Log updates whenever the store value changes.
  19. Use useInsertionEffect to inject a console log before DOM mutations.
  20. Compare useInsertionEffect execution order with useLayoutEffect.

Intermediate Questions

  1. Create a component that smoothly scrolls to bottom when new messages are added using useLayoutEffect.
  2. Measure an image’s height with useLayoutEffect before displaying it.
  3. Demonstrate race condition issue with useEffect and solve using useLayoutEffect.
  4. Build a reusable Modal component exposing open() and close() methods.
  5. Create a Form component where parent resets all input fields by calling child method via useImperativeHandle.
  6. Expose multiple child component functions (focus + validate) using useImperativeHandle.
  7. Compare difference: controlling input via props vs controlling via parent ref using useImperativeHandle.
  8. Create custom component PasswordInput exposing method to toggle visibility.
  9. Generate unique keys for multiple dynamic form fields using useId.
  10. Compare hardcoded IDs vs generated IDs in repeated lists.
  11. Implement a large item search list and optimize rendering using useTransition.
  12. Add spinner UI when isPending is true with useTransition.
  13. Build a filterable gallery with fallback UI during transition.
  14. Demonstrate smoother typing experience for a large filtered list with useTransition.
  15. Implement deferred rendering in a live search box with thousands of items.
  16. Render a Markdown preview where text input updates instantly but preview rendering uses useDeferredValue.
  17. Implement a basic theme store and sync theme changes with components using useSyncExternalStore.
  18. Build a custom hook wrapping useSyncExternalStore for subscribing to window.innerWidth.
  19. Use useInsertionEffect with a CSS-in-JS library simulation to inject styles early.
  20. Demonstrate difference in flickering when injecting styles via useEffect vs useInsertionEffect.

Advanced Questions

  1. Build a chat app UI where latest message auto-scrolls using useLayoutEffect.
  2. Create a tooltip system that dynamically repositions based on text width using useLayoutEffect.
  3. Create a video player component exposing play/pause methods to the parent via forwardRef + useImperativeHandle.
  4. Create a carousel/slideshow exposing next(), prev(), and goToSlide() methods controllable by parent.
  5. Build a live product search where typing input updates instantly but the large product list renders deferred.
  6. Use useTransition to implement smooth UI updates in a multi-tab dashboard where heavy data loads don’t freeze UI.
  7. Combine useDeferredValue + useTransition for typing + filtering in a massive dataset UI.
  8. Implement a real-time external clock store synced to all components via useSyncExternalStore.
  9. Build a global dark/light theme management system using useSyncExternalStore for subscription + useInsertionEffect for injecting CSS variables.
  10. Optimize a CSS-in-JS styled app so styles are injected without flicker using useInsertionEffect.