What are the best practices for using refs in React?

What are the best practices for using refs in React?

Using refs in React can be powerful, but it's important to follow best practices. Here are some key points:

1. Use refs sparingly, mainly for managing focus, text selection, or media playback.
2. Avoid using refs for state management; prefer state and props for data flow.
3. Create refs using React.createRef() or useRef() for functional components.
4. Clean up refs in componentWillUnmount to prevent memory leaks.

Can you explain when to use useRef versus createRef?

Certainly! Use createRef when you need a ref for class components, as it creates a new ref each time the component renders. On the other hand, useRef is designed for functional components and maintains the same ref across renders, which is useful for keeping mutable values.

What are some common mistakes to avoid with refs?

Common mistakes include:

1. Overusing refs instead of state.
2. Not cleaning up refs in componentWillUnmount.
3. Using refs to manipulate the DOM directly instead of letting React handle it.

How can I access a ref in a functional component?

In a functional component, you can access a ref by creating it with useRef() and then attaching it to a DOM element using the ref attribute. For example:

const myRef = useRef(null);

return <div ref={myRef}>Hello World</div>;

You can then access the DOM node via myRef.current.