Fusor vs React

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

The click$e$update means:

• click
• event handler
• update DOM when handler completes
• $ separator symbol
• full reference

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.

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

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!