# Mastering React Hooks: Ref Hook

Refs are a way to store a reference to a React component or DOM element. The `useRef` hook is used for creating mutable references to elements or values that persist across renders.

## Creating a Ref

To create a ref, we use the `useRef` hook in a functional component. Here's an example:

```jsx
import { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  function focusInput() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}
```

In this example, we create a `inputRef` ref by calling `useRef` with an initial value of `null`. We then use this ref to set the `ref` prop of an `input` element. We also create a `focusInput` function that calls the `focus` method on the `inputRef.current` element when a button is clicked.

## Storing Mutable Values

In addition to storing references to elements, refs can also be used to store mutable values that persist across renders. Here's an example:

```jsx
import { useState, useRef } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef(0);

  function handleIncrement() {
    prevCountRef.current = count;
    setCount(count + 1);
  }

  return (
    <div>
      <p>Current Count: {count}</p>
      <p>Previous Count: {prevCountRef.current}</p>
      <button onClick={handleIncrement}>Increment Count</button>
    </div>
  );
}
```

In this example, we create a `prevCountRef` ref to store the previous value of the `count` state. We use the `handleIncrement` function to update both the `count` state and the `prevCountRef.current` value.

## Conclusion

The `useRef` hook is used for creating mutable references to elements or values that persist across renders. By calling `useRef` with an initial value of `null` or any other value, we can create a ref to a React component or DOM element. We can also use refs to store mutable values that persist across renders, allowing us to access previous state or values.  
  
The next article in this series will cover the Memoization hooks, `useMemo` and `useCallback`. These hooks are used to optimize performance by memoizing expensive computations or preventing unnecessary re-renders in React components.