useRef() Cheat Sheet

useRef.js

/*
NOTE:

There are 2 rules to remember about reference:
1. The value of the reference is persisted (remains unchanged) between component re-renderings;
2. Updating a reference doesn't trigger a component re-rendering.

2 main differences between reference and state:
1. Updating a reference doesn't trigger re-rendering, while updating the state makes the component re-render;
2. The reference update is synchronous while the state update is asynchronous.
*/

// hook needed
import {useRef} from 'react'

// creating a reference
const initialValue = undefined
const useRefInstance = useRef(initialValue)

// accessing the value
const refValue = useRefInstance.current

// updating the value
useRefInstance.current = 'new value'

// updating best practices
function MyComponent({ prop }) {
  const myRef = useRef(0);

  useEffect(() => {
    myRef.current++; // Good!

    setTimeout(() => {
      myRef.current++; // Good!
    }, 1000);
  }, []);

  const handler = () => {
    myRef.current++; // Good!
  };

  myRef.current++; // Bad!

  if (prop) {
    myRef.current++; // Bad!
  }

  return <button onClick={handler}>My button</button>;
}

// how to pass props and manage UI in a custom child component.
import CustomComponent from './CustomComponent';

function ParentComponent() {
  
  // reference of custom component (child)
  const customComponentRef = useRef(null);
  
   const incChildVal = () => {     
    // Accessing a function in the child component via useRef
    customComponentRef.current.toggleBtn();
  };
  
  const decChildVal = () => {     
    // Accessing a function in the child component via useRef
    customComponentRef.current.decrement();
  };
  
  return (
    <>
      <CustomComponent ref={customComponentRef} />
      <Button title="Increment Child Value" onPress={incChildVal} />        
      <Button title="Decrement Child Value" onPress={decChildVal} />
  </>
}

// child
import {forwardRef, useImperativeHandle} from 'react'

const CustomComponent = forwardRef((props, ref) => {
  const [value, setValue] = useState(0);

  // Function to update the value
  const increment = () => setValue(value + 1);
  
  const decrement = () => setValue(value + 1);
  
   // expose functions here
    useImperativeHandle(ref, () => ({
      increment,
      decrement,
    }));

  return (
    <>
      <Text>Value: {value}</Text>
      <Button title="Increment" onPress={increment} />
      <Button title="Decrement" onPress={decrement} />
    </>
  );
});

// updating parent values from ui
...


// cleanup
...
  const intervalRef = useRef(null);

  const startTimer = () => {
    if (intervalRef.current === null) {
      intervalRef.current = setInterval(() => {
        setCount(prevCount => prevCount + 1);
      }, 1000);
    }
  };
...
  useEffect(() => {
// cleanup on component unmount
    return () => {
      if (intervalRef.current !== null) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);