New hook to create "state-based" ref

[axelboc]

This combination of useSafeState and useHookableRef looks very similar (but a lot cleaner) to something I had to do in my own code. If I understand correctly, it re-renders when a ref's value changes, right? This is indeed very convenient when trying to get a ref of an element that isn't rendered right away on mount, as mentioned in #755. May I suggest making a new hook for this?

[xobotyi]

I've been thinking it after writing said code.
But yet not came up with decision if it worth a separate hook, as rn can be done in literally 4 rows of code.

[axelboc]

Some arguments in favour of the new hook:

• The 4 lines aren't very obvious and may require a comment to explain their purpose. A hook with a self-descriptive name would be quite beneficial for readability.
• It is a surprisingly convenient pattern and the solution to bugs that are quite tricky to pin down. Adding a hook would maybe make this solution more discoverable to developers and help them prevent those bugs from happening in the first place.
• Any decent-size app would probably use this pattern more than once or twice, so it would save developers from having to write their own custom hook.

[axelboc]

Perhaps an alternative to a new hook would be to simplify the API of useHookableRef as such:

const [element, setElement] = useSafeState<T | null>(null);
const elementRef = useHookableRef<T | null>(element, setElement);

I believe this requires removing the requirement for the hookable ref's setter to return a value. Is there a use case for wanting to set a custom internal ref value that couldn't be achieved with a separate useSafeState?