Всем привет!

Наверняка со всем хайпом вокруг solid.js, сигналов и подобных решений вы наверняка могли слышать такой термин, как "Fine-Grained Reactivity".

Однако задавались ли вы вопросом, что он означает?

Я также, как и большинство из нас не слышал данное выражение, однако по контексту понял, про что тут говориться.

Однако пару дней назад задался вопросом, правильно ли я понял значение или же тут есть какие-то детали?

К моей радости, термин я понял правильно, и он означает, что каждая нода реактивного стейта знает о том, где она используется - какие реакции/эффекты ее используют.

Чтобы понять о чем я, давайте посмотрим на данный пример кода:

const object = observable({ a: 5, test: 'asdf' });

autorun(() => {
  console.log("object.a: ", object.a);
}); // залогирует при инициализации object.a: 5

object.a = 10; // залогирует "object.a: 10"

object.a = 11; // залогирует "object.a: 11"

object.test = 'asdf2'; // не залогирует ничего

Как мы видим наш auto run callback вызывается только при инициализации и изменении стейт, на который он завязан.

Однако в кейсы с React, можно делать вот так:

function Component() {
  const [, forceUpdate] = useReducer((v) => v + 1, 0);

  console.log('I render');

  return <button onClick={forceUpdate}>Update Me</button>;
}

И тут при каждом клике у нас будет обновляться Component, даже не смотря на то, что мы вообще не используем наш стейт.

Соответственно, у нас есть реактивность только на уровне компонента, а не на уровне каждого свойства. И как раз из-за этого в react'е часто есть проблема лишних рендеров.

Так что теперь можете использовать данную фразу (fine-grained reactivity), если хотите выглядеть умным в глазах других коллег (я бы не советовал).

Если хотите углубиться в тему подробнее - то можете ознакомиться с данной статьей от создателя Sold:
https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf

#devtips #reactivity