How to use static variables with react hooks

Question

With const [open, setOpen] = useState(false) I can create a variable open which is persisted over calls of a functional component.

But which hook can I use if I do not want a rerender when setting a variable?

I have a custom hook draft:

const useVariable = (initialValue) => {
  const ref = useRef();


  return useMemo(() => {
    ref.current = [initialValue, (newValue) => { ref.current[0] = newValue }]
  }, [])
}

But according to https://reactjs.org/docs/hooks-reference.html#usememo I can not rely that useMemo is not called anytime again.

Answer 1

You can make use of useRef hook if you just want to store the some data in a variable and not re-render when the variable is set

const unsubCallback = useRef(null);

if(!unsubCallback) {
    unsubCallback.current = subscribe(userId)
}

Answer 2

Thank to @shubham-khatri I found a solution to my question. Just use the initialValue of the useRef hook:

const useVariable = initialValue => {
  const ref = useRef([
    initialValue,
    param => {
      ref.current[0] = typeof param === "function"
        ? param(ref.current[0])
        : param
}
  ]);
  return ref.current;
};

https://codesandbox.io/s/v3zlk1m90

Edit: To account for Christopher Camp's comment I added that also a function can be passed like in useState. See usage in codesandbox