DEV Community

Discussion on: React vs Preact vs Inferno

Collapse
 
chebum profile image
Ivan Nikitin • Edited

Both Preact and Inferno libraries can work as an alias for React. When using Webpack it's necessary to simply write the following to replace React with an alternative library.

resolve: {
    alias: {
        "pica": path.join(__dirname, "./node_modules/pica/dist/pica.js"),
        "react": "preact/compat",
        "react-dom/test-utils": "preact/test-utils",
        "react-dom": "preact/compat",     // Must be below test-utils
        "react/jsx-runtime": "preact/jsx-runtime",
    },
    extensions: [".ts", ".tsx", ".js"]
},
Enter fullscreen mode Exit fullscreen mode

I tried both with a quite cumbersome application with about 900 DOM nodes. Both Inferno and Preact made the JS file smaller. For example, Preact saved 100Kb after minification, but before gzip.

RAM usage was almost the same between all 3 versions with production build.

I noticed that Inferno used some % of CPU even without user activity. Preact had some frame drops when a lot of elements moved at once around the screen. Neither of these problems was present with React.