Home
Courses
Learn React 19: The Complete Guide to Modern Web Apps

Challenge: Build a Note-Taking App with Advanced Hooks

Test your ability to use advanced React Hooks to build a performant, real-world note-taking app with persistence, search, and optimized rendering.

We'll cover the following...

Problem statement

You need to build a note-taking app that allows users to:

  • Add, delete, and search notes.

  • Persist notes to localStorage so they survive page reloads.

  • Optimize re-renders using useMemo and useCallback.

  • Display total note count and prevent unnecessary recalculations.

  • Automatically focus the input field when the component mounts (using useRef).

Technical requirements:

  • Use useReducer to manage note state (add, delete, load actions).

  • Use a custom Hook useLocalStorage to persist notes.

  • Use useCallback for event handlers (addNote, deleteNote).

  • Use useMemo to optimize derived values (e.g., filtered list, total notes).

  • Use useRef to auto-focus the input field when the app loads.

Expected output

  • The app shows a list of notes with an input field and add button.

  • A search box filters notes in real time.

  • Added notes persist after reloads.

  • The input field auto-focuses on mount.

  • UI remains smooth even when typing rapidly or managing many notes.