Ignas Poška
Sep 9 · 3 min read

React has evolved over the years and some concepts were replaced by better ones

1. Using classes 📜

Every time we wanted to use state or take advantage of lifecycle methods we had to compose a Javascript class to create a React component. Even if we did not have a need to use these features we were choosing a class in advance, because you never know when your component will demand a state or side effects.

Fortunately, early 2019 React 16.8 was released with the feature of hooks. React hooks provides us an ability to replace a state with useState hook which is much handier than the previous state concept.

Lifecycle methods also are replaced by React hooks. useEffect runs on every render and gives an opportunity to get rid of lifecycle methods completely.

2. Using lifecycle methods 🔄

To be honest, when I first read about useEffect I did not get how a single method can replace several: componentDidMount, componentDidUpdate, and componentWillUnmount🙄

The thing is that the React team considered lifecycle methods harmful and decided to get rid of them, it turns out that the same functionality can be reached by the side effect concept.

You can define useEffect function which describes what needs to be done after every render, in the described function you can return another function which will be called before every new render or on component unmount phase.

You may say that it’s not wise from the side of performance or that “you should not slam an API on every rerender”, and you would be right. Obviously, this was covered by the team of React, there are ways how to alter your useEffect function to work as you want and need. If you want to know how that can be done, React documentation is ready for you 📖

3. Wrapping return content to div/array 🌯

If you ever used React longer than a week, you definitely faced the Adjacent JSX elements must be wrapped in an enclosing tag. error. This simply means that you cannot return more than one batch from the render method.

Back in the day solution was to wrap elements to the `div`, but with this, we end up having a lot of redundant `divs` in the HTML. Later React 16.0 provided us the ability to get rid of redundant divs by putting elements to the array and then returning it.

With the release of React 16.2 fragments were introduced. Now if you want to return multiple elements from therender method you just simply wrap those inside <></> and the problem solved. Now you can forget div/array wrappers as a solution to this problem 🤯

There is one exception still 💥

You will not avoid using classes and lifecycle methods when you create error boundaries. Long story short, error boundaries are components that are created to catch exceptions happening in child components. The boundaries require to use lifecycle methods — getDerivedStateFromError or componentDidCatch .

However this is not what we use in everyday development, error boundaries are set once for the project and left to do their job. Furthermore, the React team has marked in the documentation that hooks for replacing these lifecycle methods will be created soon 🔨

I am not encouraging you to forget these ❌

Don’t get me wrong, I am not trying to wipe these ideas from your mind. Remembering these can be really useful especially if you jump into an old React project.

By this article, I want to show how React has evolved and which concepts can be ditched when developing from scratch.

What is your opinion about moving to the new concepts in frameworks? Are you an enthusiast of innovation or you prefer sticking to the time tested classics? Let me know in comments 💬

JavaScript in Plain English

Learn the web's most important programming language.

Ignas Poška

Written by

Web developer. Software engineering student. High on js.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade