Getting around conditional use of custom hook in React

Question

Using React, I am writing code for a plugin that uses local storage or session storage depending on the application that is calling it. It is set up by passing in optional parameters to the component that default to local storage. If our web service is using the plugin, it passes the session storage methods in. Due to constraints, our desktop app doesn't pass in the parameters, and so we default to local storage within the component.

export function myComponent(optionalParameter?: string, storeOptionalParameter?: (selection: string) => void) {
    const [variable, storeVariable] = optionalParameter && storeOptionalParameter
        ? [optionalParameter, storeOptionalParameter]
        : useLocalStorage<string>('storageName', 'default');
}

I know this is breaking the rules of hooks. Technically, it compiles and runs just fine, since every render will be dependent on the environment it is rendered in. I'd still like to find a better way to accomplish this so my linter will stop complaining about it.

GitGitBoom · Accepted Answer · 2020-08-26 19:07:51Z

1

Why not just wrap the component.

function Component({variable, storeVariable}) {
  ...
}

function ComponentThatUsesStore() {
  const [variable, storeVariable] = useLocalStorage<string>('storageName', 'default');
  return (<Component variable={variable} storeVariable={storeVariable} />)
}

function ParentComponent(...) {
   if (optionalParameter && storeOptionalParameter) {
     return (
       <Component
         variable={optionalParameter}
         storeVariable={storeOptionalParameter}
       />
     );
   }
   return <ComponentThatUsesStore />;
}

answered Aug 26, 2020 at 19:07

GitGitBoom

1,9226 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Justin Over a year ago

I ended up with a similar solution. The component is called from two places, one of which it is already wrapped. I was able to just call each storage type and pass them in to each component as necessary. Something I should've seen sooner, but your solution got me there.

Collectives™ on Stack Overflow

Getting around conditional use of custom hook in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related