React State Management, Effects & Custom Hooks

Packt via Coursera

Go to class Write review

Details

Go to class

Provider

Coursera
Pricing

Paid Course
Languages

English
Certificate

Certificate Available
Effort

13 hours
Sessions

Self-Paced
Level

Intermediate
Subtitles

English

Found in

Part of

The Complete React 19 Developer Course (incl. Next.js 16)

Overview

Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off

One annual plan covers every course and certificate on Coursera. 40% off for a limited time.

Get Full Access

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.

Syllabus

React Context Review - Common mistakes and best practices

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.

Professional Project: Portfolio Website - Dark/Light Mode, React Context

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.

Reference values with Refs

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.

Reference values with Refs Review - Common mistakes and best practices

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.

Professional Project: Card Flip Game - useRef

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.

React Effects

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.

React Effects Review - Common mistakes and best practices

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.

Professional Project: Weather App - useEffect

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.

Professional Project: Story Collection - Multi-language UI, React Context, React

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.

Professional Project: Kanban Board with Drag & Drop like Trello - useEffect

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.