DEV Community

loading...
Cover image for What a React developer needs to know in 2021

What a React developer needs to know in 2021

ra1nbow1 profile image Matvey Romanov ・4 min read

Knowledge of JavaScript

React is built on the basis of JavaScript. First of all, people who want to learn React need to understand how well they know JavaScript itself.

Very often, developers ask questions that show that they don't know the basics of JavaScript. While questions about the React ecosystem arise much less frequently. Therefore, first of all, we recommend that you deepen your knowledge of JavaScript, and then return to React.

Using State Manager

In React.js there is no built-in StateManager. As a standard, the Redux library has been used for a long time, but it does not perform this role very well — when working with it, you have to write a lot of boilerplate code, there are no controls for asynchronous behavior and side effects.

So other State Managers began to appear. The Redux developers took into account their shortcomings and presented the Redux Toolkit library, which was well received by the frontend developers.

Redux Toolkit-a library on top of Redux. It allows you to achieve the same thing as Redux, but with Redux Toolkit you will have to write much less code than with Redux. In addition, the Redux Toolkit uses internally Immer.js Therefore, you do not need to think about data immutability, i.e. use destructurization, creating new state objects in the reducers each time.

Another rather promising library is MobX. The business logic of MobX is different from Redux. Do not forget about Effector, which was created by people from the CIS.

To date, these three State Managers are the most popular. All three libraries do their job very well, but we usually use either the Redux Toolkit or the Effector.

React Hooks

React Hooks came to visit us with the 16.8 version and will stay with us for a long time. If you are hearing about them now for the first time, then you should first read them in the official React documentation.

Hooks are just another way to describe the logic of your components. It allows you to add some features to functional components that were previously unique to class components.

Most people at the interview are floating on questions about hooks, although all the information is in the documentation. Anyone who wants to develop, you definitely need to at least see how they work, and with experience, you can understand the technology more deeply.

There are some restrictions on the use of hooks that distinguish them from normal functions. First of all, they can not be used in class components. Hooks cannot be called inside loops or conditions. This restriction is imposed by React itself in order to be able to track which hooks were called.

When the hooks first appeared, we at Holyweb experimented on them, wrote new components, and saw what would come of it. When everything worked out well, we used them further, wrote new features on them. For those who haven't used React Hooks yet, I would recommend trying it out — they make it very easy to describe the necessary logic, they make the code cleaner and more understandable.

Many people are concerned about the question of whether to rewrite the project in a new way because there are hooks. I would not say that performance will increase or fall significantly from such actions. If you like the hooks, then write new features of your project on them. You will always have time to rewrite the old pieces.

Let's look at the examples on the hooks.

Let's make a simple Counter.

Here is the code using the class component:


class App extends React.Component {
 state = {
   counter: 0
 };
 onIncrement = () => {
   this.setState((state) => {
     return {
       counter: state.counter + 1
     }
   });
 };
 onDecriment = () => {
   this.setState((state) => {
     return {
       counter: state.counter - 1
     }
   });
 };
 render() {
   return (
     <div>
       <button onClick={this.onIncrement}>+</button>
       <button onClick={this.onDecriment}>-</button>
       <div>Counter: {this.state.counter}</div>
     </div>
   );
 }
}

Enter fullscreen mode Exit fullscreen mode

And here is the code using the functional component and hooks:


function App () {
 const [counter, toggleCounter] = React.useState(0)
 const onIncrement = () => {
   toggleCounter(counter => counter + 1)
 }
 const onDecriment = () => {
   toggleCounter(counter => counter - 1)
 }
 return (
   <div>
     <button onClick={onIncrement}>+</button>
     <button onClick={onDecriment}>-</button>
     <div>Counter: {counter}</div>
   </div>
 );
}

Enter fullscreen mode Exit fullscreen mode

You can make sure that the code on the hooks is cleaner and clearer.

Server-Side Rendering

Now there are several popular SSR solutions. On our first projects, where we used SSR, we had a completely custom solution. Over time, we began to study and use ready-made solutions. Each of them has its pros and cons. For example, on one of the current projects, we use Razzle, and on the other — Next.js.

Next.js is a popular lightweight framework for static and server-side applications that use React. It includes ready-made styling and routing solutions and assumes that you are using Node.js as the server environment. What Next doesn't quite like is that in some cases it dictates the architecture and how to build applications. But this is a matter of taste and personal preferences.

Razzle is a server-side rendering framework that is more flexible than Next.js but does not require mandatory configuration.

If you are seriously thinking about SSR, we recommend that you carefully study the following products and try to get the most practical experience:

  • js (React-based);
  • js (Vue-based);
  • Gatsby (React-based);
  • Gridsome (Vue-based).

Common mistakes in learning React

The main mistake of most developers is the inattentive reading of the documentation. For example, one of our developers admitted that he did not read the documentation well and started using useCallback everywhere when it was not necessary to do so. Only later did he realize this when he started rereading the documentation.

The questions that people ask in chats and profile communities are often already answered in the documentation — you just need to read it carefully.

In addition to the library itself, the specialist must have knowledge of such technologies like HTML, CSS, JavaScript, npm, Git, Babel, WebPack, Redux. Skills with other tools may also come in handy, but this depends on the vacancy.

But the main thing is not the hard skills that a person has already mastered, but how well he can learn. If the developer has this skill, it will not be difficult for him to prepare for the interview, come to the company and learn everything that is necessary in the course of work.

Discussion (25)

pic
Editor guide
Collapse
rangercoder99 profile image
RangerCoder99

So same thing they needed to know in 2020, ok awesome! 😀

Collapse
dastasoft profile image
dastasoft

I would add as optional but highly recommended, knowing the principles of Clean Code and some understanding of how to apply a correct architecture to your project, in front-end we tend to hardcode more things like putting routes or literals directly in place instead of doing enums.

React is also about being clean and tidy :)

Collapse
thabo78828856 profile image
Collapse
yitzhakbloy profile image
yitzhak-bloy • Edited

Good read!
I just wanted to remark, having the React Context, the need for a state management library has significantly diminished in many cases.

Collapse
angelomiranda profile image
angelo.miranda • Edited

specially the useReducer hook

Collapse
julians300 profile image
Julian Salas

Yep, Context with useReducer will work for 90% of apps.

Collapse
tomavelev profile image
Toma • Edited

Few more things may be included to be 2020:
Not a word about architecting stuff to be app-like: offline-first mobile business work approach, pwa and eventual transition to RN, not Cordova/PhoneGap - if a native app is required.

Haven’t heard a word from Facebook about migrating the engine to WebAssembly.

All the design patterns and dependencies over addition in JavaScript is making the web bigger and bigger and slower. In production, sometimes the apps may be fast and optimized, but - How big is your node _modules?

Collapse
rangercoder99 profile image
RangerCoder99

96% of Node modules folder files are never use in production or development even there is so much junk in that folder, packages downloading their complete git history and 100s of files while you may need one 1 or 2 JavaScript files from it!

Collapse
starpebble profile image
starpebble

WebAssembly looks cool. There hasn't been much explanation about this silence you mention.

Collapse
pcockerell profile image
Peter Cockerell

One of the reasons your class-based component was more complex than the functional one was that you unnecessarily used the function-argument form of setState(). You could have just used

onIncrement = () => this.setState(
{counter: this.state.counter + 1}
);

instead.

Collapse
virtualghostmck profile image
virtualghostmck

This could be buggy in some cases.

Collapse
pcockerell profile image
Thread Thread
vberen profile image
Nicklas Wessel

Because of the async nature.
If you spam the button it might only increment it by one, since the state at that point at the second click isn't updated yet.

Thread Thread
pcockerell profile image
Peter Cockerell

Ah, got it, thanks!

Collapse
angelomiranda profile image
angelo.miranda • Edited

Great post Matvey! Javascript is definitely a pre-requisite for learning React. One may struggle without jess fundamental js knowledge.

React Hooks are a powerful addition to functional components. No need to refactor functional components now in order to use lifecycle and state.

I find myself guilty of just jumping ReactJS when I first saw it, got too excited. Need to be better here. LOL 😅

I want to share this video as a supplement to this post, uploaded today-

Collapse
_perceptionbox_ profile image
PerceptionBox

Good read!

Collapse
aalphaindia profile image
Pawan Pawar

Interesting thanks

Collapse
ra1nbow1 profile image
Matvey Romanov Author

You’re welcome

Collapse
xavierbrinonecs profile image
Xavier Brinon

I'm using redux toolkit as my go to State Library but XState is going strong for state management as well. Definitely worth having a look.

Collapse
angelomiranda profile image
angelo.miranda

JS is definitely important to understand and know prior to learning React.

Arrow Function, map, filter, reduce and etc will help an engineer/developer code in reactjs.

Collapse
jessebeke profile image
jesse beke

Nice list 👏👏

Collapse
thereis profile image
Lucas Reis

It's important to mention about react context, it helps to behave as a state manager. And also is very interesting to mention their study about React Server components.

Collapse
darkphantom7750 profile image
Rushan S J

Wow, this is a great article. All React devs should know this stuff even in 2022

Collapse
aalphaindia profile image
Pawan Pawar

Good read!

Collapse
disgustingdev profile image
disgusting-dev

That feeling when you jumped to the Vue project one year ago and now like: "Redux Toolkit? Effector? New approaches again?". Kinda constant vibe of learning something new