Search⌘ K
Home
Courses
The Road to React: The One with Hooks

Imperative React

Explore imperative programming in React by learning how to use the useRef and useEffect hooks to interact directly with DOM elements. This lesson helps you understand when and how to apply imperative methods like setting input focus and managing complex animations, complementing React's declarative approach.

We'll cover the following...

React is inherently declarative, starting with JSX and ending with hooks. In JSX, we tell React what to render and not how to render it. In a React side-effect Hook (useEffect), we express when to achieve what instead of how to achieve it. Sometimes, however, we’ll want to access the rendered elements of JSX imperatively, in cases such as these:

  • read/write access to elements via the DOM API:
    • measure (read) an element’s width or height
    • setting (write) an input field’s focus state
  • implementation of more complex animations:
    • setting transitions
    • orchestrating transitions
  • integration of third-party libraries:
...