Master of React ref

React Ref is a fantastic feature in React that allows you to directly access and manipulate DOM (Document Object Model) elements. In simpler terms, it's a way to reference a specific element in your React app, giving you the power to modify and interact with it outside of the normal React data flow.

This series is your ultimate guide to mastering the use of ref in React. We'll start with the basics, such as string and callback ref, and then dive into more advanced topics like the useRef() hook and forwardRef() API. By the end, you'll have a deep understanding of how to use ref like a pro in your React applications. Get ready to take your React skills to the next level!

• 01: Access a component's underlying DOM node with findDOMNode()

• 02: String refs

• 03: Store a reference with callback refs

• 04: Access the methods of class components

• 05: Use callback refs to access individual elements in a list

• 06: Implement a basic container query with callback refs

• 07: Save the element passed to a callback ref as a state

• 08: Create a custom hook returning a callback ref

• 09: Make an element draggable

• 10: Pass refs to child components using the function as a child pattern

• 11: Create a reference using React.createRef()

• 12: Reference an element with React's useRef() hook

• 13: Build your own drawing board

• 14: Drag and drop items within a list

• 15: Persist values between renders

• 16: Save the previous value of a variable

• 17: Detect whether an element is in view

• 18: Pass a ref to a custom hook

• 19: Merge different refs

• 20: Build a tooltip component

• 21: Pass a ref to a child component using forwardRef()

• 22: Expose methods of a component using useImperativeHandle()