React Assignment – 4

Basic Questions

  1. Create a counter app using useState to increment and decrement a number.
  2. Manage a boolean value in state (toggle Show/Hide text).
  3. Update an object in state containing {name, age} using useState.
  4. Add items to an array in state using the spread operator.
  5. Delete an item from an array (e.g., todo list) in state immutably.
  6. Use multiple useState hooks to manage name, email separately.
  7. Render different messages conditionally (e.g., “Logged In” vs “Guest”) based on state.
  8. Update nested object state immutably (change only user’s age).
  9. Debug state updates in React Developer Tools by inspecting a component.
  10. Store form input field values inside local state with useState.
  11. Use useEffect to log a message when the component first mounts.
  12. Add a cleanup function in useEffect to log a message on unmount.
  13. Fetch fake API data inside useEffect and render it.
  14. Use useEffect with dependency array [count] to run only when count updates.
  15. Create a timer with setInterval inside useEffect and clean it up.
  16. Use useContext to pass a theme (light/dark) through components without prop drilling.
  17. Create a ThemeContext and provide “dark mode” to a child component with useContext.
  18. Compare inline prop passing vs useContext to see the benefit of avoiding prop drilling.
  19. Manage both count (number) and isVisible (boolean) in the same component with useState.
  20. Show the difference between using no dependency array, empty dependency [], and [count] in useEffect.

Intermediate Questions

  1. Build a simple Todo App using useState (add, delete todos).
  2. Manage form input for multiple fields (name, email, age) with a single state object.
  3. Create a shopping cart state where items can be added/removed with immutable updates.
  4. Update nested arrays (e.g., users with their tasks) immutably.
  5. Maintain component state organization by grouping related values logically.
  6. Write a toggle button that changes color conditionally based on a boolean state.
  7. Build a counter that updates using a callback function form of setState.
  8. Demonstrate state batching by updating two values in the same render.
  9. Use ternary conditional rendering (isLoggedIn ? “Welcome” : “Login”) with state.
  10. Organize state by splitting into smaller independent useState hooks vs one large state object.
  11. Use useEffect to fetch data and update UI, then cleanly handle loading and error states.
  12. Demonstrate stale state bug if dependency array is omitted, fix by adding dependencies.
  13. Create a subscription example (e.g., window resize listener) and clean it up correctly with useEffect.
  14. Compare behavior of missing cleanup in useEffect vs proper cleanup.
  15. Nest multiple contexts (ThemeContext, UserContext) and consume them with useContext.
  16. Build a parent-child component where child reads data from parent via useContext
  17. Demonstrate prop drilling with 3 components then remove it using useContext.
  18. Explain dependency array rules in useEffect by experimenting with [count] vs [].
  19. Create a form using state hooks where submit saves input values and clears fields.
  20. Show the difference between using state for derived values vs computing directly in render (avoid unnecessary state).

Advanced Questions

  1. Build a Todo App with filters (All, Completed, Pending) using useState.
  2. Create a multi-step form where state persists across steps.
  3. Construct a shopping cart with total price calculation using array/objects in state.
  4. Implement a like button system (toggle likes + maintain total count) with best practices for immutability.
  5. Manage a complex nested state (blog posts with comments, likes) in one component using object/array state manipulation.
  6. Implement an API data fetcher component using useEffect and handle success, error, and loading states.
  7. Build a real-time clock using useEffect and cleanup interval correctly.
  8. Create a login flow using useContext for global authentication state across multiple components.
  9. Demonstrate multiple useEffect calls: one for API fetch, another for event listener, each handling dependencies separately.
  10. Build a Theme Switcher App using useContext where the toggle button switches all components theme globally without prop drilling.