Join us for React Conf on Oct 7-8.
Learn more.
logo by @sawaratsuki1004
React
v19.1
Learn
Reference
Community
Blog

    GET STARTED

  • Quick Start
    • Tutorial: Tic-Tac-Toe
    • Thinking in React
  • Installation
    • Creating a React App
    • Build a React App from Scratch
    • Add React to an Existing Project
  • Setup
    • Editor Setup
    • Using TypeScript
    • React Developer Tools
  • React Compiler
    • Introduction
    • Installation
    • Incremental Adoption
    • Debugging and Troubleshooting

  • LEARN REACT

  • Describing the UI
    • Your First Component
    • Importing and Exporting Components
    • Writing Markup with JSX
    • JavaScript in JSX with Curly Braces
    • Passing Props to a Component
    • Conditional Rendering
    • Rendering Lists
    • Keeping Components Pure
    • Your UI as a Tree
  • Adding Interactivity
    • Responding to Events
    • State: A Component's Memory
    • Render and Commit
    • State as a Snapshot
    • Queueing a Series of State Updates
    • Updating Objects in State
    • Updating Arrays in State
  • Managing State
    • Reacting to Input with State
    • Choosing the State Structure
    • Sharing State Between Components
    • Preserving and Resetting State
    • Extracting State Logic into a Reducer
    • Passing Data Deeply with Context
    • Scaling Up with Reducer and Context
  • Escape Hatches
    • Referencing Values with Refs
    • Manipulating the DOM with Refs
    • Synchronizing with Effects
    • You Might Not Need an Effect
    • Lifecycle of Reactive Effects
    • Separating Events from Effects
    • Removing Effect Dependencies
    • Reusing Logic with Custom Hooks

Is this page useful?

On this page

  • Overview
  • What are Effects and how are they different from events?
  • You might not need an Effect
  • How to write an Effect
  • Step 1: Declare an Effect
  • Step 2: Specify the Effect dependencies
  • Step 3: Add cleanup if needed
  • How to handle the Effect firing twice in development?
  • Controlling non-React widgets
  • Subscribing to events
  • Triggering animations
  • Fetching data
  • Sending analytics
  • Not an Effect: Initializing the application
  • Not an Effect: Buying a product
  • Putting it all together
  • Recap
  • Challenges