Use a different method signature for custom components

[SilentCicero]

From:

function MyComponent(props, state, setState) {
}

to:

function MyComponent(props, { state, setState }) {
}

This way I can pull only the methods I use from the input object. This should only increase the codebase by 2 bytes or so (max). Mainly useful for hooks and other things that will be added eventually. This way you can add hooks and not change the signature.

[SilentCicero]

@styfle thoughts on this one ^^

[styfle]

This way you can add hooks and not change the signature.

How is that different then just adding arguments? Adding arguments doesn't change the signature since javascript doesn't have overloaded methods.

What is your use case?

[SilentCicero]

I prefer this notation:

function MyComponent(props, { state, setState, hooks }) {
}

Because I can do this:

function MyComponent(props, { state, setState }) {
}

or

function MyComponent(props, { hooks }) {
}

or

function MyComponent(props, { state, setState, hooks }) {
}

whereas with the other notation, I'm forced to always include:

function MyComponent(props, state, setState, hooks) {
}

[wavesoft]

Keep in mind that the goal is not only to minimise the library footprint, but also to provide an API that will keep the consumer's code minimal.

Keeping this in mind, this signature will require the user to provide the state and setState strings that cannot be minified (since they are object properties).

function MyComponent(props, {state, setState}) {
}

One could argue that gzip will replace all occurrences of state and setState with 1 or 2 bytes, but you would still increase the overall size by 10~11 bytes since you would still need the full word at least once in the Gzip dictionary.

The benefit of this signature is that the argument can be very easily minified. For example this:

function MyComponent(props, {name='ohai'}, setState) {
  return div({onclick(){ setState({name: 'clicked'}) }}, name);
}

Could be (eventually) minified to this:

function a(b, {c='ohai'}, d){return e({onclick(){ d({c: 'clicked'}) }}, c)}

Therefore, to answer your request, I would like to avoid that signature, unless there is a specific need and an elegant solution to this problem.

[SilentCicero]

@wavesoft I suppose i can write a wrapper to this to provide that custom component signature. Yes, your right on bytes. I just much prefer the object signature approach, as you can get only the things you need from it, vs being forced to use the old method signature.