Conditional hooks, maybe

Most of the times I can handle development with react hooks without additional tricks. Until today I had no issue with the rules of react-hooks, but today was the day when everything changed.

We use a third-party hook that handles the persistence of the state in our simple form, but it does not handle the case if the local storage is not available. We requested a fallback implementation in the third-party hook but we still needed a fix, a temporary fix maybe.

Hooks can't be used inside conditions, and I needed to use a different hook based on the local storage availability.

Here is my solution:

const getHook = () => {
  try {
    // this throws an error if the localstorage is not available
    window.localStorage.getItem('key'); 

    return usePersistence;
  } catch {
    return useState;
  }
};

The getHook function tests the local storage then it returns the right hook based on the trycatch success state.

Based on this solution we need to get an initial value (because our hooks use different initial values)

const getInitialValue = () => {
  try {
    window.localStorage.getItem('contact-form');

    return 'contact-form';
  } catch {
    return {};
  }
};

So now we have a fallback for our third-party hook and the right initial value for each case.

The usage is the following:

// inside the functional component
const [formValues, setFormValues] = getHook()(getInitialValue());

Not the nicest solution, but it works.

English isn’t my first language, so please excuse any mistakes.

Thank you all for your attention and time, hopefully, my solution won't last long in the project.