# uhooks-fx

**Repository Path**: mirrors_WebReflection/uhooks-fx

## Basic Information

- **Project Name**: uhooks-fx
- **Description**: uhooks with propagated states
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-21
- **Last Updated**: 2026-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# <em>µ</em>hooks-fx

[![CSP strict](https://webreflection.github.io/csp/strict.svg)](https://webreflection.github.io/csp/#-csp-strict)

This module allows reduced/state updates to propagate to an outer hook, avoiding duplicated execution of inner hooks for libraries that have contained updates such as [<em>µ</em>land](https://github.com/WebReflection/uland#readme).

This module exports same utilities via `uhooks-fx/async`, which is based on `uhooks/async` for asynchronous hooks.

### Example
```js
const test = ({hooked, dropEffect, useEffect, useState}) => {

  const state = initial => {
    const result = useState(initial);
    useEffect(() => {
      console.log('\x1b[2m', initial, 'fx in', '\x1b[0m');
      return () => {
        console.log('\x1b[2m', initial, 'fx out', '\x1b[0m');
      };
    }, []);
    console.log('\x1b[2m', 'state value:', result[0], '\x1b[0m');
    return result;
  };

  const first = hooked(state);
  const second = hooked(state);

  const parent = hooked(
    () => {
      const [a, $a] = first('a');
      const [b, $b] = second('b');
      // with uhooks inner updates don't propagate
      // so this will be logged only once
      // with uhooks-fx though, inner changes schedule
      // an update for the outer hook, in this case
      // the parent callback, so this will be logged
      // twice, with updated values too
      console.log('', a, b);
      if (a === 'a')
        $a('$a');
      if (b === 'b')
        $b('$b');
    },
    // there is an extra argument to flag a hook as parent
    true
  );

  parent();

  setTimeout(dropEffect, 0, first);
  setTimeout(dropEffect, 0, second);
};

// verify the difference
setTimeout(test, 100, require('uhooks'));
setTimeout(test, 200, require('uhooks-fx'));
```