DEV Community

Discussion on: How React isn't reactive, and why you shouldn't care

View post
Collapse
 
dodiameer profile image
Mohammed Ali Agha •

In my opinion, the difference that sets apart Vue and Svelte from React is that you don't call setState in them, that is what makes them reactive.

React lets you take control and call setState when you feel like it, while Vue and Svelte abstract it away behind a runtime/compiler to give you a reactive feel

Collapse
 
ryansolid profile image
Ryan Carniato • • Edited

I know a lot of people think that way. But that's just a syntax consideration. Reactive JavaScript libraries predate getter/setters and proxies. Like Knockout or earlier versions of Svelte, or countless other examples.

Does this hook make React any more or less reactive?

function useAssignableState(init) {
  const [state, setState] = useState(init);
  return {
    get value() { return state; }
    set value(v) { setState(v); }
  } 
}

// use like:
const count = useAssignableState(5);
count.value++:
Enter fullscreen mode Exit fullscreen mode

All of these do scheduling in the background depending on the library they are present in and are effectively identical:

setCount(5);

count(5);

count.set(5);

count = 5;

count.value = 5;
Enter fullscreen mode Exit fullscreen mode

Calling setState gives you no more or less guarantees than assigning a value in Svelte or Vue. It means that at minimum sometime in the future the state of your application will reflect this change. Calling setState 10 times or assigning 10 different values is all the same for the libraries we are talking about.

I respect syntax preferences and there are direct consequences to opting into single primitives versus the clear read/write segregation of React. But none of this has to do with reactivity.