Preact Vs React JS

[@robethrahmatullah7779]

5:19 You actually need "react-dom" (42 KB minified + gzipped) to render something in the browser 10 KB "react" library only contains the core runtime so it could be used for other platforms (react native, ink, etc.)

[@StephenBlum]

@robethrahmatullah7779 ah good catch! This is noteworthy in that case. Since react-dom a masive 42KB minified and gzipped. Preact is a much smaller library in comparison.

[@vitezslavackermannferko7163]

Preact doesn't need an equivalent ofreact-dom library to function?

[@shashankpandey8346]

I am currently using react in my company portfolio website and I think it is pretty slow and heavy for just rendering some shadcn components and framer-motion and static data. I have rarely used useState too, let alone other hooks like useeffects, reducer, memo and callbacks. But I don't think this is for me, since the syntax are basically different and I would be converting like entire code manually. Last time I checked, there were at least 20 components and 10 pages. not gonna transfer.

[@StephenBlum]

Yes you are right. ReactJS is very slow. Preact can help speed it up. And if you use the preact-compat library, most components should work github.com/preactjs/preact/blob/main/compat/package.json

[@damiangilz]

What i find weird of Preact is that the docs still push class components hard.

[@StephenBlum]

good point! Yes class components are push for compatibility focus. That may be due to docs that should be updated to push harder on "hooks". PreactJS supports hooks and this can be a better approach

[@MichaelJiang-fj8kg]

Signals is the real killer in Preact! I love signals

[@StephenBlum]

Nice! Yes it's a huge win on performance and simplicity. It automatically notifies any dependents when that value changes. Faster and more efficient ❤️

[@ramsey2155]

You need to use the deployment configuration for the actual optimization...

[@StephenBlum]

Nice! that explains the optimization opportunity. Thank you! 😊

[@lifeofcode]

Good stuff as always bro. LOL! I believed preact at face value when they said they were 3kb. Never looked into it! I've heard people using the preact signals package though in react. Seems like it could be cool.

[@StephenBlum]

😄 It was funny to see that the two libraries were the same size! Both about 10kb minified. You are right, the signal package can help improve the performance. It seems like the largest advantage that Preact can offer

[@dereksniper]

was looking into this and seems like a better alternative. However would you make a project in vite in react and just import signals or just go preact?

[@lifeofcode]

@@dereksniper vite + react with signals is how I've seen most taking advantage of it.

[@StephenBlum]

@@dereksniper excellent question. I would go with the simplest approach. Fewer dependencies. I tend towards liking things simple and performant 😄 using preact directly would be a great choice

[@einfacherkerl3279]

the real problem is that everyone is trying to fix react. Solidjs, qwik, Preact etc. they are trying to create solution for which problem needs to be invented. what is needed is the application framework that helps build app logic. this is not fully solved by redux, xstate , mobx etc.

[@StephenBlum]

good point yes that React itself is already provides the most common needs for the majority of apps. today React does have a few missing or unoptimized capabilities. Things like redux, xstate, mobx can be standardized directly in React core itself as optional recommended additions. We could benefit from the performance boosts that Preact promises if React would make the needed adjustments to provide a faster user experience

[@nexovec]

I don't like this, not only because you don't understand react-dom, which means you have never used react as an actual js library in the browser, else you'd know you can't even render anything this way, but more importantly, because the way react makes you program results in larger bundles than strictly necessary. How is it possible you feel confident talking about this? Waste of time.

[@StephenBlum]

You are right 😄 The miss in the video, it is exactly as you describe. React + React-dom is massive compared to Preact. This is a big aspect to choosing Preact and improving your user's experience by providing a faster and smaller web framework library.

[@nexovec]

@@StephenBlum That was already pointed out by others too. What I want to know is if it's possible to ship a client-side SPA under say 500kb using something that can leverage the existing React components ecosystem. Preferably without multiple build steps too. Can't get an answer anywhere on the internet. Maybe no-one has tried... maybe react devs don't care about bundle size and performance until they receive complaints from customers, and then what they do is offload something to SSR and call it a day.

[@StephenBlum]

@@nexovec looking around there does appear to be a way to reduce SPA JS size using React + Ecosystem. If I can get it to work I'll add this to the planned upcoming videos as a tutorial walkthrough! 🙌

[@StephenBlum]

@@nexovec this actually looks like a pretty good option for existing-projects: preactjs.com/guide/v10/getting-started#integrating-into-an-existing-pipeline it requires editing your build files with Babel and Webpack. If you are not using those, then it is a necessary step to get as much as possible from PreactJS. The aliasing is need to replace react core and react-dom. Also Preact +10 includes hooks. Which is a problem I ran into when getting it to eventually work.

[@nexovec]

​@@StephenBlum Do show some benchmarks and comparisons of a react app ported into preact, if you go that far, in which case count me interested 🙌

[@LazyDesigner65]

😮

[@StephenBlum]

😄🙌

[@WisamJbori]

disk size is not file size, I hate that I wasted 2 minutes of my life

[@StephenBlum]

actually that's an interesting point. wait, disk size of a file is not the same as the file size? Yes! this is true. Because disks are segmented into chunks ( block size ). Usually 4K chunks. So if you have an 5K file it actually takes up 8K on disk.

[@KhaiyomOdinaev]

It's obvious you have no idea what you're talking about. The video doesn't show disk size-it’s the file size in his terminal. Also he was using curl, and during the download, it clearly showed 11107 bytes received. Maybe pay attention next time.

[@StephenBlum]

@@KhaiyomOdinaev yes you are right it was 11K for both. I missed an important aspect. react-dom is required for web apps and adds another 50K. preact doesn't require this extra size. this is where the strength of preact starts to show up. not only is it 5x smaller in javascript, it has a few improvements to dom interaction updates and repaints using signals/events. Preact is better than I gave credit for in the video.

[@KhaiyomOdinaev]

@@StephenBlum Hi! Just to clarify, my earlier reply wasn’t directed at you-it was more of a response to the hater’s comment. Your video was actually really helpful during my research when I was considering Preact for Astro. While I’ve ultimately settled on Solid.js after more research, your content was a great resource along the way. Thanks for sharing your insights!

[@StephenBlum]

@@KhaiyomOdinaev thank you for mentioning this 😄 Your clarification is helpful. Happy you were able to get data from my video. Solid.JS is a great framework! Clean and easy to understand coming from React