A detailed commentary by Dan Abramov on the article “Things that no one will tell you about React”

Hello! Recently, Dan Abramov, the creator of Redux, left a rather massive commentary on an article on Medium Things which React.js told you very quickly, which quickly became popular and quite soon scored 3 more recommendations than the article itself :)
Actually, the current article is my translation of his comment, since the latter contains valuable comments on the current and future state of the React / React Router.
I hope someone will be useful.

Hi, thanks for the feedback! :)

I appreciate you sharing your unpleasant experience with React.

Your post contains widespread misconceptions in the React community, so I wanted to take a moment to clarify them for anyone who has the same problems.

This does not mean that React works equally well for everyone, or that the issues you have raised are irrelevant. But there are several points that, in my opinion, it is important to identify for a proper understanding of these problems.

I started writing my application on React 15.5.0, knowing that my code is outdated before starting work, because Facebook just announced that by the next major release they plan to completely rewrite the framework, and this most likely means that they will destroy current source code due to the fact that it can no longer be supported.

This statement is incorrect because the "completely rewritten" is backward compatible. We emphasize this whenever we talk about the next release, but, nevertheless, it is worth repeating again.

React 16 (which is still in progress) is "rewritten", but it has the same public API. Of the more than 30,000 (!) Components on Facebook, only about a dozen need to be changed, and even these few components relied on unsupported and undocumented behavior.

On this basis, compatibility is literally 99.9%. This gives us confidence that React 16 will work with your code.

Read more about our commitment to stability without stagnation .

Not being an expert in how to set up an entire project with a framework (and skeptical about entrusting this work to some kind of climax tool like create-react-app )

The Create React App is a thin layer on top of the Webpack and Babel. It does not generate the project code for you, but it configures these tools in the recommended way.

The complaint about the boilerplate and the start-up code in the following sentences seems to me not quite fair, especially considering that there is a solution to this problem, but you intentionally decided not to use it.

There is still a lot of work in this area, but I believe that the situation has improved over the past year, and I hope you will give it a chance if you decide to use React in the future again.

after a couple of hours of refactoring, I realized that my code continues to grow, and it became 3 times more than before, because of the large amount of template code needed for Redux (ActionTypes, Actions, Reducers, connect ...)

Do not use Redux if there is no special need for this, as there is obviously a lot of boilerplate in it.

React has a built-in state system , and I would recommend starting with this and raising the state to a higher level when you need to distribute it between components.

You can always add Redux later if you feel the need for it, but starting development with MobX or Redux is often a monkey job.

React-router is not officially supported by Facebook and its developers had a fantastic idea to release as many as 3 major versions in some 5 months.

I am not connected with the React Router, but I think this statement is incorrect. If you have been following the React Router releases, then you should be aware of the following:

• 1.0 was released in 2015.
• 2.0 was released in February 2016 and is largely backward compatible with version 1.0 (but it has added warnings about API changes that will be in version 3.0)
• 3.0 was released in October 2016, and basically, it is the same version 2.0, but with final changes to the API.

Therefore, if you updated only to a stable version (considering that you might not know what you are doing), then the transition from version 1.0 to 2.0 should have been almost without incident. You should have seen a bunch of warnings, and you had 8 months to fix them before the next major release (3.0) removed these warnings.

You are absolutely right that version 4.0 appeared right after 3.0. 4.0 is a completely rewritten version, and it is slightly different in its philosophy (this was done in order to correct a lot of errors and problems that have been reported in the Issues React Router over the years). You are right that version 4.0 came out immediately after 3.0. But there is such a thing - you don’t have to switch to it at all. There are still many applications using 3.0, and its branch is still actively supported. Therefore, nothing will happen to you if you stay on version 3.0, and the development team is working on creating a migration patch to make the transition to version 4.0 easier for those who are interested.

As a result: if you used only stable versions of releases, React Router gave you a whole year to switch to the new API. They released a 4.x version to fix long-standing problems, but pledged to support the 3.x branch as needed. It doesn't sound so bad in my opinion!

Once I realized what the problem was, I was dragged into the rabbit hole, forcing to add empty divs everywhere, just to allow the application to function properly
you can render functional components simply by using JS functions, but you need to wrap all your markup in some tag so that the Virtual DOM is created correctly

Glad you paid attention to this! React 16 will support returning an array from the render() function, so you can remove all those divs and wrapping tags that reach you. We work hard to make your life better.

React seems to be an advanced rendering framework that was born to replace the use of files on the server side (for example, PHP) and mixed with HTML, which confirms this tweet

I did not quite understand what you mean by this. But if you're wondering why React makes sense to us (and the guys from Airbnb, Twitter, Pinterest, and other companies with their product), then, as I usually say, React, thanks to its apparent data flow and the lack of manual control of the DOM tree, helps us create applications with fewer bugs. And it's great if you find other strategies to solve these problems, because we all learn from each other.

This article reveals the details of why some developers find React useful, so I recommend taking a look at it! And it's also great if React does not solve your problem, or if you simply chose an alternative framework, such as Ember or Angular, to solve your problems.

its apparent simplicity is hidden behind a whole string of tools that you need to tweak before you start writing just a single line of code

This statement is incorrect, because if you wish, you can use React without ES6 and without JSX . This is as simple as writing a single script tag in your application.

But we do believe that the build tools are useful (considering that you mentioned using your linter, you probably have the same opinion). Although they are not easy to set up, we still hope that solutions such as the Create React App will make them more accessible, and fundamental projects (such as the Webpack) will eventually become more user-friendly (Webpack 2 makes good progress in this area with its configuration check). Therefore, I am optimistic about these projects, although I understand why people might want to use React without them.

You need to import the react-dom and react into your scripts, without ever using the latter, for some wild reason, known only to the React command itself.

The reason is that converting JSX code requires React in scope, because this is how JSX works with browser global variables. And this is precisely due to your previous complaint: we want JSX to work even without using any collector!

you must use className instead of class to define a CSS class for the DOM

You are completely right, it is annoying. This is one of the earliest design decisions in accordance with the DOM API, which is confusing. We can change this in the future!

and what did you expect from a framework that has more than 1,000 calls in Github Issues

React Native has a much wider API, and it is very popular, so it’s natural that it gets a lot of calls to issues. Many of them are requests for support, but we are grateful for any help in correcting bugs and helping people solve their problems.

which allows you to set default alpha dependencies (React@16.0.0-alpha.6) to develop your native application?!?

The React package version is generally not suitable for React Native users, because it contains very little code ( Component and createElement ). The reconciler code is synchronized with React Native separately. Thus, it is an artifact of various release cycles of RN and React, but this does not mean at all that RN applications use an unstable version of React. This is exactly the same version that we use on Facebook for production. Although I agree, this is confusing, and we hope to correct the process of releasing new versions between React and React Native in the near future.

To summarize, I am grateful that you raised these issues in your article. They appear very often, and I thought that it was important to separate the wheat from the chaff. But for us and for the React ecosystem there is definitely much more work to provide more convenience for React users, and I am glad that you were able to formulate these common problems so that we can better solve them.

Edited: I would like to thank everyone who pointed out the passive aggressiveness of the first version of this comment. I am very sorry for that! I edited it in a more professional way, which I had to do before publishing. I also deleted all the emoticons, but you can still find them on my Twitter .