Refs in React

If we want to remember some information, but don't want its change to cause the component to render, then we'll need refs and, accordingly, the useRef hook that works with them.

A ref (or reference) is a regular JavaScript object with a single property current that you can read or modify.

Like states, refs can store any type of data - these can be numbers, strings, objects, and even functions.

If your data is used for rendering, then store it in the state, and if you don't need rendering, then using refs can be more efficient. Also, unlike the state, the value of a ref changes immediately.

In general, refs are used where you need to step away from React and interact with external APIs - most often browser APIs - that don't affect the rendering of a component. This could be storing a id timer, or storing an object that doesn't require JSX to be evaluated, but most often it's interacting with DOM elements. They can be used for focus management, text selection, or media playback.

In the next lesson we will look at working with refs and the useRef hook in practice.