Beginning React Hooks (Free)

Explore how to use the useState hook from React with a simple counter example, increment, decrement, and reset, and observe how state updates trigger rerendering.

Learn to use useState hook to manage a boolean for toggling between light and dark themes, including a toggle function that inverts previous state and updates background and text colors.

Use the use state hook to manage name and email as controlled inputs updated with onChange, then prevent default on submit and show an alert with the entered data.

Build a to-do list using the useState hook to store an array, immutably add items with the spread operator, and render the list via map.

Learn to manage an object in state with React useState for a user profile form, updating name and age via a handle change function and controlled inputs.

Demonstrates using the use state hook with previous state values to increment and decrement a step counter via a callback version of set state, updating and displaying the current step.

Learn to use the state hook to conditionally render components in React by toggling visibility with a button and a ternary expression.

Introduce the use effect hook in React, import it, and run after renders to handle side effects. Use a dependency array to control execution, including an empty array on render.

Fetch data with the useEffect hook, manage state with useState, and render jsonplaceholder todos, including error handling and one-time execution via an empty dependency array.

Demonstrate useEffect for a simple counter that increments every second with setInterval, manage state with useState, and clean up on unmount with return and clearInterval.

Demonstrate how the useEffect hook reacts to state changes by linking a dependency to count and updating a dummy value. Discuss dependency arrays, including empty arrays, and best practices.

Identify common useEffect pitfalls, including infinite loops from updating the same state, missing dependencies, and forgetting cleanup functions; implement proper dependency arrays and timer cleanup to avoid unmount issues.

Explore common gotchas with the React useEffect hook, including missing dependency arrays, long dependency lists, infinite rerenders, and updating state with the previous state pattern.

Track window size with a useState hook and update it via a useEffect resize listener. Clean up the listener on unmount and display current width and height.

Poll an api at regular intervals using a useeffect hook to fetch data and handle errors, polling every five seconds with a cleanup that clears the interval.

Discover how to synchronize React state with local storage using useEffect, persisting a user's name by reading and writing a name key with getItem and setItem.

Use the useEffect hook to fetch user profile data when a user ID prop changes, managing loading and error states while calling an API.

Demonstrates conditioning a useEffect with a count dependency, updating a message when the count exceeds five and wiring a button to increment the counter.