React Assignment – 8

Basic Questions

  1. Set up react-router-dom in a new React project. Add two routes: /home and /about.
  2. Create a Navbar component with Link buttons to switch between Home and About routes.
  3. Build a route /contact that displays a simple “Contact Us” page.
  4. Use useNavigate to programmatically navigate to /about when a button is clicked.
  5. Implement a redirect from / to /home using routing.
  6. Add /profile/:username route and display the username from URL params.
  7. Create a /products/:id dynamic route that renders “Product ID: {id}”.
  8. Use useEffect and fetch to retrieve user data from https://jsonplaceholder.typicode.com/users and render names.
  9. Replace fetch with Axios to fetch the same data.
  10. Create a loading state when fetching data; display “Loading…” until data arrives.
  11. Add error handling: show “Something went wrong” when API request fails.
  12. Create a route /posts that fetches and displays a list of posts.
  13. Use useNavigate to go back one page when pressing a “Go Back” button.
  14. Create a layout component (Navbar always visible, children render below using <Outlet />).
  15. Create a nested route under /dashboard (child routes: /dashboard/stats and /dashboard/profile).
  16. Display the current route path using useLocation.
  17. Add a “404” route that catches all unknown paths.
  18. Use React.memo on a component that receives props and confirm it prevents re-renders when props don’t change.
  19. Build a counter component and wrap it in React.memo to avoid re-renders unless count changes.
  20. Create two sibling components (Parent → ChildA, ChildB), memoize ChildA so it doesn’t re-render when only ChildB updates.

Intermediate Questions

  1. Create a Login page and a protected route /dashboard. Redirect to /login if not logged in.
  2. Set up nested routes: /dashboard/settings and /dashboard/profile, both under a DashboardLayout.
  3. Programmatically navigate to /profile/AkashSingh from a button click.
  4. In /user/:id, fetch user details based on the dynamic id using Axios.
  5. Implement query params: /search?term=react and display the query term using useSearchParams.
  6. Create a logout button that redirects to /login using useNavigate.
  7. Add an API call that fetches posts, displays them, and also shows “Loading…” and “Error” states.
  8. Use React Query to fetch users from https://jsonplaceholder.typicode.com/users and display them.
  9. Enable caching with React Query so reloading doesn’t trigger a refetch immediately.
  10. Fetch data for /posts and display pagination (5 posts per page with Next/Prev buttons).
  11. Implement infinite scroll pagination using React Query for posts.
  12. Add a retry mechanism in API call (Axios retry with 3 attempts on fail).
  13. Build a todo list where todos are fetched from an API and updated optimistically using React Query.
  14. Simulate slow API (use setTimeout) and show a spinner while waiting.
  15. Create a search input for posts that fetches filtered data each time the user types.
  16. Use React.memo + useCallback to prevent unnecessary re-renders in a list of items.
  17. Create a ProductCard component that re-renders only if props actually change.
  18. Compare behavior of memoized vs non-memoized child components when parent state updates.
  19. Use React.lazy and Suspense to lazy load a route (/about).
  20. Create a custom hook useApi that wraps Axios calls and returns {data, loading, error}.

Advanced Questions

  1. Create a role-based protected route: only admin users can open /admin, others redirect to /not-allowed.
  2. Implement route guards for an ecommerce app (/cart protected, /login for unauthenticated users).
  3. Create nested routes with multiple layouts: AppLayout, DashboardLayout, and render different sets of pages.
  4. Implement a master-detail view: /products shows a list, clicking a product navigates to /products/:id with dynamic details fetched from API.
  5. Create a paginated API call using React Query and display “Page X of Y” with navigation.
  6. Implement query caching: fetch API data, then navigate away and back to avoid refetch via React Query’s cache.
  7. Use React.memo, useMemo, and useCallback together to fully optimize a component with heavy computation.
  8. Build an ecommerce “Cart” page with Context + React Query (products fetched via API, cart stored in Context, revalidate on add/remove product).
  9. Implement dependent queries in React Query (fetch user → then fetch posts of that user).
  10. Build a “Performance Test App”: one large stateful parent with many memoized children, and log re-renders before/after optimization.