Future scalability is often used to justify a more complicated tech stack than necessary. Even though I don’t advocate for reinventing the wheel, I do believe that there is a middle ground between vanilla JS and server-rendered React. What about frameworks such as https://github.com/yoshuawuyts/choo or https://github.com/hyperapp/hyperapp or even just https://github.com/maxogden/yo-yo ?
While I was reading your post I was mentally preparing for a reply that would focus on the significant amount of library code that react, react-dom and styled-components would add to your JS bundle. But you then mentioned that you’re rendering everything on the server with next.js or something called Gatsby. So to sum it up: even a simple blog now needs 90kb of parsed JS code for libraries, and to mitigate that, we should introduce server side rendering with additional frameworks?
The complexity and mental overhead your proposed tech stack would add to a small project (especially considering that this is the FreeCodeCamp medium channel) is enormous. It would probably mean that the average aspiring frontend dev here on FreeCodeCamp would need a lot more time to complete any given project and end up with less confidence in the code they wrote, because there are just so many (more) moving parts.
If you really want to stay in the react ecosystem (which is definitely a great reason to use react, I’d mention that), you could also consider something like https://github.com/developit/preact.