useProvidedRefOrCreate

A hook that creates a ref if one is not provided as a prop.

There are some situations where we only want to create a new ref if one is not provided to a component or hook as a prop. However, due to the rules-of-hooks, we cannot conditionally make a call to React.useRef only in the situations where the ref is not provided as a prop.

This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating rules-of-hooks.

Example

This div has a light blue outline when the ref is set

import React from 'react'
import {useProvidedRefOrCreate} from '@primer/react'


export default function Default() {
  const providedRef = React.useRef<HTMLDivElement>(null)
  const ref = useProvidedRefOrCreate(providedRef)


  React.useEffect(() => {
    if (ref.current) {
      ref.current.style.border = '1px solid lightblue'
    }
  }, [ref])


  return <div ref={ref}>This div has a light blue outline when the ref is set</div>
}

import React from 'react'
import {useProvidedRefOrCreate} from '@primer/react'

export default function Default() {
  const providedRef = React.useRef<HTMLDivElement>(null)
  const ref = useProvidedRefOrCreate(providedRef)

  React.useEffect(() => {
    if (ref.current) {
      ref.current.style.border = '1px solid lightblue'
    }
  }, [ref])

  return <div ref={ref}>This div has a light blue outline when the ref is set</div>
}

API

Loading data for useProvidedRefOrCreate...