4 ms·

What does Preact sacrifice to get down to 3kb? Browser support? Nothing comes for free I guess, so just curious about the too good to be true nature of it. Why

What does Preact sacrifice to get down to 3kb? Browser support? Nothing comes for free I guess, so just curious about the too good to be true nature of it. Why isn’t the React team putting in these enhancements?

ylyn 6y ago
They sacrifice all the crazy performance optimisations that React has.
- vijaybritto 6y ago
  TBH preact is faster than React. I don't know of a scenario where react was faster.
  - runawaybottle 6y ago
    How do you measure? I’d love to see large renders and complex top level state updates that hit hundreds of components.
    - williamstein 6y ago
      This is relevant, though it is 2 years old: https://medium.com/@ajmeyghani/javascript-frameworks-performance-comparison-c566d19ab65b https://medium.com/@ajmeyghani/javascript-frameworks-perform...
    - vijaybritto 6y ago
      I worked on a project where we were using React 14 before 2 years. It was only a desktop B2B site and later on when mobile support was inevitable we tried to use preact for mobile site since it was lightweight. We actually found that our desktop site which renders large tables with hundreds of rows and multiple chart components performed better in Preact without any optimizations. I'd say maybe a 20 - 30% improvement since we were seeing a gain FPS of around 10 frames. I think it would have been a bit more faster if we had used MobX instead of redux but that was too late.
      - jamil7 6y ago
        Haven’t worked with React for a little while and only ever used MobX on one project, I was mostly using Redux. What performance improvements does MobX offer?
        vijaybritto 6y ago
        Redux always returns a brand new state. This will cause all consumers to rerender and react will update the dom only if there is a change. But with Mobx its more granular and the updates are atomic. This isn't a problem in apps where there is a single team working on it. But when you work in enterprise apps where different parts are worked on by different teams state updates to redux can be costly. This is not a limitation of Redux but a human problem that occurs inevitably. I've seen this in 3 different large scale projects. It starts well but after a year or so when people move out/in this bites us. This can be enforced with strict rules, eslint plugins and infra but they are expensive as hell. EDIT: 'This will cause all consumers (with incorrect mapStateToProps configuration) to rerender'
        jamil7 6y ago
        Understood, this is the reason I suspected and have spent considerable time in the past optimising state updates to forms in React and Redux projects so can imagine how this would become an issue in much larger teams than the ones I was working in.
        tga 6y ago
        When using Redux, components are supposed to select small parts of the state tree, and then they only rerender when those change. It is absolutely not the case that all components render on each unrelated update of the global state, that would be crazy. https://react-redux.js.org/next/api/hooks#useselector https://react-redux.js.org/next/api/hooks#useselector It is true that all of the selector functions need to run on each change, but those are supposed to be really small pure functions and their performance should be negligible, compared with everything else that normally happens in an app. Edit: It is absolutely possible to affect performance with Redux, especially on a large app — for example if hundreds of selectors need to run for every keystroke in a textbox.
tsujp 6y ago
They have most of it listed in their docs here: https://preactjs.com/guide/v10/differences-to-react/ https://preactjs.com/guide/v10/differences-to-react/
vijaybritto 6y ago
There are a few stuff that are missing from core preact that can be added via preact/compat package namely: memo, forwardRef, PureComponent, Event listener modifications similar to react, etc.,
littlecranky67 6y ago
They don't do the event normalization/redirection. This is something you probably won't notice or need in your project anyways. I myself encountered the difference just once, when using Portals: In React, all events inside the portal would bubble/propagate to the parent components of the React component tree just as if the portal was mounted as a child of the surrounding component. In preact, all events in the portal propagate to the actual, real browser DOM hierarchy. I.e. if you have a click event inside the portal, the wrapping Preact parent component would never see the event or be able to handle this. This incompatibility would only be an issue when migrating to Preact from React; if you start with Preact from the beginning you would refrain from using this event bubbling to notify the enclosing component and use some other mechanism (i.e. forward the event data through a custom event handler or PubSub instance).
jordic 6y ago
Synthetic event system + render decoupling. Preact uses the event system of the platform (browser) and only renders to it (there's no react native support). Anyway we are using it at prod and allowed us to reduce our bundle sizes ;)
- eyelidlessness 6y ago
  Worth noting that while Preact specifically doesn’t support React Native, JSX does. So to the extent the dev APIs stay in line you can always swap out the underlying library for that target (or other renderers).

ylyn 6y ago

They sacrifice all the crazy performance optimisations that React has.

vijaybritto 6y ago
TBH preact is faster than React. I don't know of a scenario where react was faster.
- runawaybottle 6y ago
  How do you measure? I’d love to see large renders and complex top level state updates that hit hundreds of components.
  - williamstein 6y ago
    This is relevant, though it is 2 years old: https://medium.com/@ajmeyghani/javascript-frameworks-performance-comparison-c566d19ab65b https://medium.com/@ajmeyghani/javascript-frameworks-perform...
  - vijaybritto 6y ago
    I worked on a project where we were using React 14 before 2 years. It was only a desktop B2B site and later on when mobile support was inevitable we tried to use preact for mobile site since it was lightweight. We actually found that our desktop site which renders large tables with hundreds of rows and multiple chart components performed better in Preact without any optimizations. I'd say maybe a 20 - 30% improvement since we were seeing a gain FPS of around 10 frames. I think it would have been a bit more faster if we had used MobX instead of redux but that was too late.
    - jamil7 6y ago
      Haven’t worked with React for a little while and only ever used MobX on one project, I was mostly using Redux. What performance improvements does MobX offer?
      - vijaybritto 6y ago
        Redux always returns a brand new state. This will cause all consumers to rerender and react will update the dom only if there is a change. But with Mobx its more granular and the updates are atomic. This isn't a problem in apps where there is a single team working on it. But when you work in enterprise apps where different parts are worked on by different teams state updates to redux can be costly. This is not a limitation of Redux but a human problem that occurs inevitably. I've seen this in 3 different large scale projects. It starts well but after a year or so when people move out/in this bites us. This can be enforced with strict rules, eslint plugins and infra but they are expensive as hell. EDIT: 'This will cause all consumers (with incorrect mapStateToProps configuration) to rerender'
        jamil7 6y ago
        Understood, this is the reason I suspected and have spent considerable time in the past optimising state updates to forms in React and Redux projects so can imagine how this would become an issue in much larger teams than the ones I was working in.
        tga 6y ago
        When using Redux, components are supposed to select small parts of the state tree, and then they only rerender when those change. It is absolutely not the case that all components render on each unrelated update of the global state, that would be crazy. https://react-redux.js.org/next/api/hooks#useselector https://react-redux.js.org/next/api/hooks#useselector It is true that all of the selector functions need to run on each change, but those are supposed to be really small pure functions and their performance should be negligible, compared with everything else that normally happens in an app. Edit: It is absolutely possible to affect performance with Redux, especially on a large app — for example if hundreds of selectors need to run for every keystroke in a textbox.

tsujp 6y ago

They have most of it listed in their docs here: https://preactjs.com/guide/v10/differences-to-react/ https://preactjs.com/guide/v10/differences-to-react/

vijaybritto 6y ago

There are a few stuff that are missing from core preact that can be added via preact/compat package namely: memo, forwardRef, PureComponent, Event listener modifications similar to react, etc.,

littlecranky67 6y ago

They don't do the event normalization/redirection. This is something you probably won't notice or need in your project anyways. I myself encountered the difference just once, when using Portals: In React, all events inside the portal would bubble/propagate to the parent components of the React component tree just as if the portal was mounted as a child of the surrounding component. In preact, all events in the portal propagate to the actual, real browser DOM hierarchy. I.e. if you have a click event inside the portal, the wrapping Preact parent component would never see the event or be able to handle this. This incompatibility would only be an issue when migrating to Preact from React; if you start with Preact from the beginning you would refrain from using this event bubbling to notify the enclosing component and use some other mechanism (i.e. forward the event data through a custom event handler or PubSub instance).

jordic 6y ago

Synthetic event system + render decoupling. Preact uses the event system of the platform (browser) and only renders to it (there's no react native support). Anyway we are using it at prod and allowed us to reduce our bundle sizes ;)

eyelidlessness 6y ago
Worth noting that while Preact specifically doesn’t support React Native, JSX does. So to the extent the dev APIs stay in line you can always swap out the underlying library for that target (or other renderers).