components as hooks about spect

[dy]

Essentially writing hook and writing a component is almost the same:

function Form (props) {
return JSX
}

function useForm (props, deps) {
return JSX
}

Component is just a form of hook, returning JSX.

[dy]

! mod can directly depend on it's props, so that is called only when it's props changed

@mod
function content (el, props) {
  
  @mod
  let result = fx(subProps)
  
}

[dy]

! portals as

function App(props) {
  render(<jsx.../>, target)
  render(<jsx.../>, root)
}

same as

render(<jsx1>  ...<jsx2/>   </jsx1>)

each nested tag is mounted on the parent container.
The structure tries to repeat itself, to make parent match to the part of code

[dy]

useEffect without dependencies is the same as useEffect(fn, [...props]). Effect with blank deps should be equivalent to run-once, not run-always.

This way, hooks are just conditional execution decorators over functions

@deps(props)
fx(){}

or more generally

@condition(props => true|false)
fx() {}

in other words

if (propsChanged)
fx(){}

[dy]

Looking at https://github.com/dy/mods/blob/master/hooks-components.jsx, the pattern emerges.
Since component is a set of connections/subscriptions to model, triggering update; and update is a set of conditional reactions/effects - that can be organized as a class with decorators, not extending some generic class but just using entries.

Inspiration: https://github.com/tc39/proposal-decorators#tracked

class Mod {
  // useState equivalent / @initialize
  @state value = initial

  @query
  query,
  
  @history
  history,

  // created once, therefore a sense to have it as decorator
  @async(api.getCatalog)
  catalog = api.getCatalog,

  @async
  categories = api.getCategories,

  @deps(catalog, )
  products,
  
  // assigning new selectedProduct triggers rerendering
  @state(null)
  selectedProduct,
  
  // rerender modal whenever any of the props change as an effect
  @deps(props)
  @mount(modal-root)
  selectedModal = (props) => <dialog {...props} />
  
  // reinit css whenever any of the props change
  @css(a, b, c)
  rootStyle (a, b, c) { return `.class-1 {} .class2 {}` }

  // main render
  render (props) {}
}

[dy]

ok, waiting for the decorators to come.
Better focus on mods- JSX now, there isn't going to be any updates.

!decorators for JSX

<div @provide() @css() >
</div>

[dy]

Hooks are not components, hooks are parts of the components/custom elements behavior/effects.