React State Management, Effects & Custom Hooks
Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
React State Management, Effects & Custom Hooks
This course is part of The Complete React 19 Developer Course (incl. Next.js 16) Specialization
Included with
Recommended experience
Recommended experience
What you'll learn
Efficiently manage state using React Context and custom hooks.
Build professional React projects like portfolio websites with dark/light mode toggle.
Master the use of React's useEffect for managing side effects.
Implement advanced state management solutions with React useRef for optimal performance.
Skills you'll gain
Details to know
May 2026
12 assignments
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- Learn new concepts from industry experts
- Gain a foundational understanding of a subject or tool
- Develop job-relevant skills with hands-on projects
- Earn a shareable career certificate
There are 10 modules in this course
This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course.
Learn to manage complex state with React Context and custom hooks while building real-world applications such as portfolio websites and interactive games. Dive into professional projects to practice dark/light mode, weather apps, and more, while understanding how to effectively use React's powerful state management features. With hands-on challenges, this course offers an engaging learning experience to ensure you build not just theoretical knowledge but also practical expertise. You will begin with understanding React Context, its common mistakes, and best practices. Then, you will learn how to incorporate React Context into a professional project—such as building a portfolio website with dark/light mode functionality. Through this, you will explore key concepts like component trees, managing state, and optimizing performance in React. Moving forward, you will develop key projects like the card flip game and weather app, using advanced hooks like useEffect and useRef. These projects will give you a clear understanding of handling side-effects and managing DOM elements efficiently. You will also dive into handling real-time data and dynamic content with React’s built-in hooks. This course is perfect for intermediate developers looking to solidify their React skills with projects that tackle real-world use cases. By the end of the course, you will be able to use React Context and hooks like useEffect and useRef to manage state, build interactive components, and persist dynamic content across different projects.
In this module, we will review common mistakes and best practices when using React Context to manage state. You'll learn how to avoid pitfalls and implement efficient state management using React Context. By the end of this module, you will have a strong understanding of how to use React Context effectively in your projects.
What's included
1 video2 readings1 assignment
1 video•Total 3 minutes
- React Context Review - Common mistakes and best practices•3 minutes
2 readings•Total 20 minutes
- Introduction to the course 'React State Management, Effects & Custom Hooks'•10 minutes
- Full Course Resources•10 minutes
1 assignment•Total 15 minutes
- React Context Review - Common mistakes and best practices - Assessment•15 minutes
In this module, we will walk through the process of building a professional portfolio website with dark/light mode functionality. We'll cover the use of React Context to manage the theme state and ensure it persists across user sessions. This project will help you understand component structure, styling, and dynamic theming in React.
What's included
22 videos1 assignment
22 videos•Total 122 minutes
- Introduction•4 minutes
- Component Tree•4 minutes
- Building the File Structure•11 minutes
- Setting Up the Navbar Layout•6 minutes
- Desktop Navigation Links•6 minutes
- Adding Light/Dark Mode Toggle•4 minutes
- Mobile Menu with Hamburger Icon•6 minutes
- Building ScrollDots for Navigation•5 minutes
- Building the Hero Section•9 minutes
- Projects Section Layout•6 minutes
- Create the ProjectCard Component•7 minutes
- Filtering Projects by Type•4 minutes
- Building the Skills & Experience Section Layout•4 minutes
- Skills Grid•5 minutes
- Experience Timeline•6 minutes
- Building the Layout of Recommendations Section•3 minutes
- TestimonialCard•6 minutes
- ArrowNavigation•5 minutes
- Company Logos Row with CompanyLogo Component•5 minutes
- Building the Contact Section•8 minutes
- Building the Footer•6 minutes
- Dark/Light Mode Persisting•3 minutes
1 assignment•Total 15 minutes
- Professional Project: Portfolio Website - Dark/Light Mode, React Context - Assessment•15 minutes
In this module, we will explore the use of React Refs for managing DOM references and their importance in React applications. You'll learn how to create a timer, access DOM nodes directly, and implement best practices for DOM manipulation using Refs. By the end, you will have hands-on experience using Refs in various scenarios.
What's included
5 videos1 assignment
5 videos•Total 27 minutes
- Introduction•4 minutes
- Creating a Timer Using Ref•8 minutes
- Accessing a DOM Node with Ref•3 minutes
- Accessing Another Component's DOM Nodes•6 minutes
- Best Practices for DOM Manipulation with Refs•5 minutes
1 assignment•Total 15 minutes
- Reference values with Refs - Assessment•15 minutes
In this module, we will review the common mistakes made while using React Refs and provide best practices for improving your implementation. We will also discuss performance optimization techniques to ensure that Refs are used efficiently in your React applications. This module helps you refine your understanding of React Refs.
What's included
1 video1 assignment
1 video•Total 4 minutes
- Reference values with Refs Review - Common mistakes and best practices•4 minutes
1 assignment•Total 15 minutes
- Reference values with Refs Review - Common mistakes and best practices - Assessment•15 minutes
In this module, we will create a fun Card Flip Game project, utilizing the useRef hook to manage the flipping logic and game state. You'll learn how to organize components, handle game state, and integrate sound effects to enhance user interaction. This hands-on project will deepen your understanding of React hooks and Refs.
What's included
14 videos1 assignment
14 videos•Total 73 minutes
- Introduction - User Walkthrough•3 minutes
- Component Tree•3 minutes
- Building the File Structure•4 minutes
- Set Up the Game State in App - Generate and Shuffle Icons Using the Fisher-Yates Algorithm•13 minutes
- Build the Settings Component and Define reInitialiseGame in the Process•4 minutes
- Reset Button•4 minutes
- ScoreBoard•3 minutes
- Conditionally Show Graffiti When the Game Is Won•4 minutes
- Building the GameBoard Component•12 minutes
- Add Flipping Logic to the Card Component•5 minutes
- Move Flipping Logic to GameBoard Using Refs•8 minutes
- Play a Victory Sound When the Player Matches All Card Pairs•3 minutes
- Play Flipping Sound on Card Flip•4 minutes
- Reset the GameBoard•4 minutes
1 assignment•Total 15 minutes
- Professional Project: Card Flip Game - useRef - Assessment•15 minutes
In this module, we will introduce the useEffect hook and demonstrate its role in handling side effects in React. You will learn how to manage dependencies, implement cleanup functions, and optimize the performance of your application by handling side effects efficiently. This module is essential for managing external data and interactions in React applications.
What's included
5 videos1 assignment
5 videos•Total 35 minutes
- Introduction to useEffect•11 minutes
- useEffect Dependencies•5 minutes
- useEffect Cleanup Functions•5 minutes
- Listening for a Keyboard Key•5 minutes
- Google Maps Resizing•8 minutes
1 assignment•Total 15 minutes
- React Effects - Assessment•15 minutes
In this module, we will review the common mistakes developers make when using the useEffect hook and discuss best practices to optimize its usage. We’ll also cover performance optimization strategies to ensure your React app runs smoothly. This module is perfect for fine-tuning your useEffect implementation.
What's included
1 video1 assignment
1 video•Total 3 minutes
- React Effects Review - Common mistakes and best practices•3 minutes
1 assignment•Total 15 minutes
- React Effects Review - Common mistakes and best practices - Assessment•15 minutes
In this module, we will guide you through building a weather app that fetches and displays real-time weather data using the useEffect hook. You'll learn how to structure the project, manage side effects, and handle asynchronous data fetching. This hands-on project will enhance your skills in using useEffect for dynamic applications.
What's included
12 videos1 assignment
12 videos•Total 72 minutes
- Introduction - User Walkthrough•2 minutes
- Component Tree•3 minutes
- Project Structure – Creating Files and Folders•9 minutes
- Header•2 minutes
- Build SearchBar and Retrieve Real Cities from the Open-Meteo Geocoding API•13 minutes
- Build a useEffect to Fetch Weather Data When a City Is Selected•5 minutes
- Build a useEffect that Transforms the API Data When Data Changes•9 minutes
- Build the CurrentWeather Component•8 minutes
- Build the HumidityCard Component•3 minutes
- Build the WindSpeedCard Component•2 minutes
- Build the HourlyForecast Component•7 minutes
- Build the Forecast Component•7 minutes
1 assignment•Total 15 minutes
- Professional Project: Weather App - useEffect - Assessment•15 minutes
In this module, we will create a multi-language story collection app that uses React Context for language management. You'll learn how to build dynamic components, structure your project, and integrate a backend service for data storage. This project will give you practical experience in developing internationalized React apps with state management.
What's included
15 videos1 assignment
15 videos•Total 98 minutes
- Introduction - User Walkthrough•2 minutes
- Component Tree•2 minutes
- Project Structure – Creating Files and Folders•4 minutes
- Building the Language Context and Wrapping App in the Provider•7 minutes
- Routing & Layout with App.jsx•5 minutes
- Building the Header•6 minutes
- Building the LanguageToggle Component•6 minutes
- Building the Footer Component•5 minutes
- Supabase Configuration & Environment Setup•10 minutes
- StoryList Page – Fetching & Displaying Data•12 minutes
- StoryCard Component•11 minutes
- StoryDetail Page•14 minutes
- StoryDetail Page: Building the Story Content Section•8 minutes
- Building the NotFound Page•4 minutes
- Build a Beautiful Custom Scrollbar•3 minutes
1 assignment•Total 15 minutes
- Professional Project: Story Collection - Multi-language UI, React Context, React - Assessment•15 minutes
In this module, we will build a feature-rich Kanban board, similar to Trello, that incorporates drag-and-drop functionality and uses the useEffect hook for dynamic state management. You’ll learn how to manage columns, tasks, and user interactions, while ensuring the app’s state persists across page reloads. This project will sharpen your React and hook-based development skills.
What's included
15 videos1 reading3 assignments
15 videos•Total 100 minutes
- Introduction - User Walkthrough•2 minutes
- Component Tree•4 minutes
- Project Structure – Creating Files and Folders•6 minutes
- Adding Dark Mode with Theme Toggle and useEffect•8 minutes
- Building the Kanban Board: Managing Column State and Rendering Tasks•12 minutes
- Adding & Deleting Columns•8 minutes
- Adding Tasks•6 minutes
- Editing Column Titles•7 minutes
- Editing Tasks Inline•9 minutes
- Use useRef to Focus and Scroll to the End of the Textarea When Editing Starts•4 minutes
- Implementing Task Deletion in the Kanban Board•9 minutes
- Implementing Drag and Drop for Tasks•9 minutes
- Handling Task Movement on Drag End•7 minutes
- Apply Custom Scrollbar Styles Using a Utility Class•5 minutes
- Persisting Kanban State to localStorage•5 minutes
1 reading•Total 10 minutes
- Conclusion to the Course 'React State Management, Effects & Custom Hooks'•10 minutes
3 assignments•Total 90 minutes
- Professional Project: Kanban Board with Drag & Drop like Trello - useEffect - Assessment•15 minutes
- Full Course Assessment•60 minutes
- Full Course Practice Assessment•15 minutes
Earn a career certificate
Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.
Instructor
Explore more from Software Development
- Status: Free Trial
Course
- Status: Free Trial
Course
Guided Project
- Status: Free Trial
Why people choose Coursera for their career
Frequently asked questions
React State Management, Effects & Custom Hooks is a comprehensive course that dives deep into React concepts like managing state using React Context, handling side effects with the useEffect hook, and creating reusable custom hooks. This course is highly relevant because React is one of the most popular JavaScript libraries for building user interfaces, and understanding these foundational concepts is key for developing scalable, maintainable applications.
This course covers key React concepts such as managing state with React Context, using effects with the useEffect hook, and building reusable custom hooks. It also includes hands-on projects, like creating a portfolio website, card flip game, weather app, and more, that allow you to apply these concepts in real-world scenarios.
By the end of the course, you will be able to manage complex state in React using Context and custom hooks, handle side effects with useEffect, and apply these concepts in building real-world projects like portfolio websites and weather apps. You'll also be able to create mobile-friendly layouts and persistent theme toggles with dark/light mode.
More questions
Financial aid available,
