VOOZH about

URL: https://www.coursera.org/learn/packt-react-state-management-effects-custom-and-hooks-pgcvw

⇱ React State Management, Effects & Custom Hooks | Coursera


React State Management, Effects & Custom Hooks

Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

1 week to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

1 week to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

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.

Details to know

Shareable certificate

Add to your LinkedIn profile

Recently updated!

May 2026

Assessments

12 assignments

Taught in English

Build your subject-matter expertise

This course is part of the The Complete React 19 Developer Course (incl. Next.js 16) Specialization
When you enroll in this course, you'll also be enrolled in this Specialization.
  • 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 videoTotal 3 minutes
  • React Context Review - Common mistakes and best practices3 minutes
2 readingsTotal 20 minutes
  • Introduction to the course 'React State Management, Effects & Custom Hooks'10 minutes
  • Full Course Resources10 minutes
1 assignmentTotal 15 minutes
  • React Context Review - Common mistakes and best practices - Assessment15 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 videosTotal 122 minutes
  • Introduction4 minutes
  • Component Tree4 minutes
  • Building the File Structure11 minutes
  • Setting Up the Navbar Layout6 minutes
  • Desktop Navigation Links6 minutes
  • Adding Light/Dark Mode Toggle4 minutes
  • Mobile Menu with Hamburger Icon6 minutes
  • Building ScrollDots for Navigation5 minutes
  • Building the Hero Section9 minutes
  • Projects Section Layout6 minutes
  • Create the ProjectCard Component7 minutes
  • Filtering Projects by Type4 minutes
  • Building the Skills & Experience Section Layout4 minutes
  • Skills Grid5 minutes
  • Experience Timeline6 minutes
  • Building the Layout of Recommendations Section3 minutes
  • TestimonialCard6 minutes
  • ArrowNavigation5 minutes
  • Company Logos Row with CompanyLogo Component5 minutes
  • Building the Contact Section8 minutes
  • Building the Footer6 minutes
  • Dark/Light Mode Persisting3 minutes
1 assignmentTotal 15 minutes
  • Professional Project: Portfolio Website - Dark/Light Mode, React Context - Assessment15 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 videosTotal 27 minutes
  • Introduction4 minutes
  • Creating a Timer Using Ref8 minutes
  • Accessing a DOM Node with Ref3 minutes
  • Accessing Another Component's DOM Nodes6 minutes
  • Best Practices for DOM Manipulation with Refs5 minutes
1 assignmentTotal 15 minutes
  • Reference values with Refs - Assessment15 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 videoTotal 4 minutes
  • Reference values with Refs Review - Common mistakes and best practices4 minutes
1 assignmentTotal 15 minutes
  • Reference values with Refs Review - Common mistakes and best practices - Assessment15 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 videosTotal 73 minutes
  • Introduction - User Walkthrough3 minutes
  • Component Tree3 minutes
  • Building the File Structure4 minutes
  • Set Up the Game State in App - Generate and Shuffle Icons Using the Fisher-Yates Algorithm13 minutes
  • Build the Settings Component and Define reInitialiseGame in the Process4 minutes
  • Reset Button4 minutes
  • ScoreBoard3 minutes
  • Conditionally Show Graffiti When the Game Is Won4 minutes
  • Building the GameBoard Component12 minutes
  • Add Flipping Logic to the Card Component5 minutes
  • Move Flipping Logic to GameBoard Using Refs8 minutes
  • Play a Victory Sound When the Player Matches All Card Pairs3 minutes
  • Play Flipping Sound on Card Flip4 minutes
  • Reset the GameBoard4 minutes
1 assignmentTotal 15 minutes
  • Professional Project: Card Flip Game - useRef - Assessment15 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 videosTotal 35 minutes
  • Introduction to useEffect11 minutes
  • useEffect Dependencies5 minutes
  • useEffect Cleanup Functions5 minutes
  • Listening for a Keyboard Key5 minutes
  • Google Maps Resizing8 minutes
1 assignmentTotal 15 minutes
  • React Effects - Assessment15 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 videoTotal 3 minutes
  • React Effects Review - Common mistakes and best practices3 minutes
1 assignmentTotal 15 minutes
  • React Effects Review - Common mistakes and best practices - Assessment15 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 videosTotal 72 minutes
  • Introduction - User Walkthrough2 minutes
  • Component Tree3 minutes
  • Project Structure – Creating Files and Folders9 minutes
  • Header2 minutes
  • Build SearchBar and Retrieve Real Cities from the Open-Meteo Geocoding API13 minutes
  • Build a useEffect to Fetch Weather Data When a City Is Selected5 minutes
  • Build a useEffect that Transforms the API Data When Data Changes9 minutes
  • Build the CurrentWeather Component8 minutes
  • Build the HumidityCard Component3 minutes
  • Build the WindSpeedCard Component2 minutes
  • Build the HourlyForecast Component7 minutes
  • Build the Forecast Component7 minutes
1 assignmentTotal 15 minutes
  • Professional Project: Weather App - useEffect - Assessment15 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 videosTotal 98 minutes
  • Introduction - User Walkthrough2 minutes
  • Component Tree2 minutes
  • Project Structure – Creating Files and Folders4 minutes
  • Building the Language Context and Wrapping App in the Provider7 minutes
  • Routing & Layout with App.jsx5 minutes
  • Building the Header6 minutes
  • Building the LanguageToggle Component6 minutes
  • Building the Footer Component5 minutes
  • Supabase Configuration & Environment Setup10 minutes
  • StoryList Page – Fetching & Displaying Data12 minutes
  • StoryCard Component11 minutes
  • StoryDetail Page14 minutes
  • StoryDetail Page: Building the Story Content Section8 minutes
  • Building the NotFound Page4 minutes
  • Build a Beautiful Custom Scrollbar3 minutes
1 assignmentTotal 15 minutes
  • Professional Project: Story Collection - Multi-language UI, React Context, React - Assessment15 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 videosTotal 100 minutes
  • Introduction - User Walkthrough2 minutes
  • Component Tree4 minutes
  • Project Structure – Creating Files and Folders6 minutes
  • Adding Dark Mode with Theme Toggle and useEffect8 minutes
  • Building the Kanban Board: Managing Column State and Rendering Tasks12 minutes
  • Adding & Deleting Columns8 minutes
  • Adding Tasks6 minutes
  • Editing Column Titles7 minutes
  • Editing Tasks Inline9 minutes
  • Use useRef to Focus and Scroll to the End of the Textarea When Editing Starts4 minutes
  • Implementing Task Deletion in the Kanban Board9 minutes
  • Implementing Drag and Drop for Tasks9 minutes
  • Handling Task Movement on Drag End7 minutes
  • Apply Custom Scrollbar Styles Using a Utility Class5 minutes
  • Persisting Kanban State to localStorage5 minutes
1 readingTotal 10 minutes
  • Conclusion to the Course 'React State Management, Effects & Custom Hooks'10 minutes
3 assignmentsTotal 90 minutes
  • Professional Project: Kanban Board with Drag & Drop like Trello - useEffect - Assessment15 minutes
  • Full Course Assessment60 minutes
  • Full Course Practice Assessment15 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

Offered by

Explore more from Software Development

Why people choose Coursera for their career

👁 Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
👁 Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
👁 Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
👁 Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

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.

This course is intended for learners with a basic understanding of React. Prior knowledge of JavaScript, HTML, and CSS is recommended but not mandatory. Familiarity with React’s core concepts, such as components, props, and state, will be helpful.

This course is designed for developers looking to deepen their understanding of React and expand their skill set by learning advanced state management techniques, effects handling, and custom hooks. It is ideal for intermediate-level developers who want to build real-world applications and gain hands-on experience.

The course has a total duration of 9 hours of video content. The time to complete the course will vary based on your pace, but it is designed to be completed over a period of a few days or weeks, depending on your schedule and prior experience with React.

Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.

If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.

Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

This course is currently available only to learners who have paid or received financial aid, when available.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,