Fusor vs React
Tags: webdev, javascript, react, vue
Published: 2023-12-15 16:51:22

> Fusor is a simple JavaScript library that declaratively manages DOM

## Common features

Fusor was inspired by React, and they both share the same ideas:

- Composable functional components
- One-way data flow
- JSX
- DOM updates only if a value or reference changes
- Updates to the parent component will trigger the necessary updates in its children

## The main difference

The fundamental difference lies in the separation of concerns within the component lifecycle (aka single-responsibility principle in SOLID)

|                    | Fusor     | React                         |
| ------------------ | --------- | ----------------------------- |
| Component creation | create()  | create_update()               |
| Component changing | state = x | setState(x) + create_update() |
| Component updating | update()  | create_update()               |

## Benefits

|                     | Fusor                                   | React                                                       |
| ------------------- | --------------------------------------- | ----------------------------------------------------------- |
| Component data      | Created once on initialization          | Created on initialization and **recreated** on every update |
| Side effects        | Normal JavaScript flow                  | Complex and verbose _hooks_ mechanics                       |
| Component updates   | Explicit, update what and when you need | Implicit, complex                                           |
| Component functions | Pure                                    | Context is required                                         |
| Library size (gz)   | ~2kB                                    | ~44kB                                                       |

## Code samples

|                    | Fusor                           | React                           | Comment                           |
| ------------------ | ------------------------------- | ------------------------------- | --------------------------------- |
| Create state       | `let x = 0`                     | `const [x, setX] = useState(0)` |                                   |
| Update state       | `x = 1`                         | `setX(1)`                       |                                   |
| Update DOM         | `update()`                      | `setX(1)`                       | **both** are manual calls         |
| Static prop/child  | `<p id={x}>{y}</p>`             | `<p id={x}>{y}</p>`             | exactly the same                  |
| Dynamic prop/child | `<p id={() => x}>{() => y}</p>` | `<p id={x}>{y}</p>`             | callbacks used for dynamic values |

## Application example

![Fusor-vs-React-counting-button-application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqb85oxrrj0dr62w5ave.png)

The `click$e$update` means:

- `click`
- `e`vent handler
- `update` DOM when handler completes
- `$` separator symbol
- [full reference](https://github.com/fusorjs/dom/blob/main/docs/reference.md#keys)

### However

Fusor avoids **recreating** component data with every update,
preventing a change in the click event handler function reference. This can be important for performance. As a result, `useCallback` should be employed in React example to achieve feature parity.

```jsx
const CountingButton = () => {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => setCount((count) => count + 1), []);
  return <button onClick={handleClick}>Clicked {count} times</button>;
};
```

### Verbosity analysis

> Verbosity - number of symbols without whitespace

| Component      | Fusor | React |
| -------------- | ----- | ----- |
| CountingButton | 116   | 189   |
| AnalogClock    | 776   | 783   |
| RequestUsers   | 1072  | 1181  |

> [Source code](https://github.com/fusorjs/dom/blob/main/docs/fusor-vs-react-verbosity.jsx)

## Other differences

|                        | Fusor             | React             |
| ---------------------- | ----------------- | ----------------- |
| DOM                    | Real              | Virtual           |
| Events                 | Native            | Synthetic         |
| Lifecycle              | Native            | Complex mechanics |
| Attribute names        | W3C Specification | Mangled           |
| Web components support | Complete          | Incomplete        |

## Why Fusor

- It is **simple**, lightweight, explicit, flexible and compatible
- It extensively utilizes modern JavaScript and browser features
- It follows the principle of doing one thing and doing it well (managing DOM elements)
- It has **zero** dependencies and is only around **2kB** in size

## PS

Fusor repo: <https://github.com/fusorjs/dom>

Thank you!