Support hooks that require props

[lukecaan]

Hi,

I might be misunderstanding this tool or how it works (although so far I love it, thanks so much!) but is it possible to extend it to be able to work with hooks that accept arguments? In all the examples I've seen they're just no-parameter hooks and when I've tried myself they don't seem to work properly.

Cheers

[betula]

Hi @lukecaan!

Thank you for writing, because I want to talk about it. When I hear this question, I want to understand what behavior is expected from the "useBetween" hook when called with parameters.

Can you show me the code you would like it to work?

I will be very glad to help!

[betula]

Because there is a main issue, what will happen when a hook shared between React components is used in one component with parameters, and in another one without parameters or with others.

[danjguzman]

I have to second what Luke said. I would like to be able to pass params as props down to custom hooks from other components with useBetween.

// Custom Hook const fromComponent = useCustomHook({...props}); (Can pass props).

// Custom Hook w/useBetween const fromComponent = useBetween(useCustomHook); (No ability to pass props).

I understand the argument that what if this hook is being used in multiple components, but one of them has props and the others do not. This should be managed by the developer who should already know what props are and aren't required with their hooks. We just need the ability to pass it as needed.

[betula]

Hello @danjguzman, Nice to hear from you! And thanks for your attention to that discussion.

You can see a partial decision of that there: https://github.com/betula/use-between/issues/38

const useCounter = (defaultValue1, defaultValue2) => {
  // ...
};

export default function App() {
  const { count1, count2, inc1, inc2 } = useBetweenTweaked(useCounter, 10, 15);
  // ...
}

Demonstration on StackBlitz But it is only about initial values.

Maybe your need some API that I try to design below?: Two methods:

• useBetweenParametrized(useCounter, initialParam1, initialParam2) - similar “useBetween” but with parameters
• setUseBetweenParams(useCounter, param1, param2) - separated method for update parameters inside shared hook

What do you think?

We have only one problem with that decision. What will happen if we call “useBetweenParametrized” without parameters? from another component before other ones. Or should all components that use it be strongly passed identical parameters?

[betula]

Hello @danjguzman, Another design specially for you!

Two functions:

• useBetweenMaster(useCounter, ...args) - similar “useBetween” but with parameters
• useBetweenSlave(useCounter) - access to master hook

Demonstration on StackBlitz

A little explain: Here we can use a hook with parameters in the "Step" component, because it's a place with necessary arguments. And use it everywhere without parameters only using a hook similar "useBetween" in other places.

What do you think about this design? Pros or cons, please explain to me your attitude.

import { useBetweenMaster, useBetweenSlave } from './use-between-master';

const useCounter = (initial, step) => {
  const [count, setCount] = useState(initial);
  const inc = () => setCount((v) => v + step);

  return {
    count,
    inc,
    step,
  };
};

const Step = () => {
  const [step, setStep] = useState(1);

  useBetweenMaster(useCounter, 0, step);

  return (
    <p>
      <b>Master</b> Step: {step}{' '}
      <button onClick={() => setStep((v) => v + 1)}>+</button>
    </p>
  );
};

function Counter() {
  const { step, inc, count } = useBetweenSlave(useCounter);

  return (
    <p>
      <b>Slave</b> Step: {step}, Count: {count} <button onClick={inc}>+</button>
    </p>
  );
}

export default function App() {
  return (
    <div>
      <Step />
      <Step />
      <Counter />
      <Counter />
    </div>
  );
}

[danjguzman]

After thinking about it for some time now (plus I forgot to respond, sorry), the props option may not actually be as useful as I had hoped without it being too complex. However, a simple useBetween(useCustomHook, {...params}) might be useful to pass some static data that is not expected to be updated.

Thanks to useBetween, I am thinking a lot more different on how to build Custom Hooks.

And I've been doing this to pass props that update the hook's states and effects:

In the useCustomHook I could just create a state: [getProps, setProps] = useState(...), and from the component that imports the useCustomHook with useBetween, I could just update the setProps to act as the "props" data a normal component would take. And then I can use the useCustomHook that takes props.

useBetween is rewiring my brain on how to develop in React. It's been great, and I've been using it in everything all year long, and it has been stable, performant, and excellent.