Published on

10 Awesome React Pro Tips - Know 'em all

10 Awesome React Pro Tips - Know 'em all

If you have been alive for at least 3 years, you know that React is one of the most popular framework in the web development projects. Here, in this post I want to share my top 10 pro tips with you in order to make you a pro React developer.

1. React is a not a web specific technology

A lot of people get caught in the fact that React is just a library. React, in fact, consists of two things, the first one is the reconciler and the second one is the renderer.

Reconciler is the core React which is not platform specific and the renderer is the react-dom which is made for the web. Similarly for React Native you are going to see the core reconciler is the React itself but react-dom is not there, instead React Native is the core renderer.

So next time if somebody asks you that can you be a React developer without being a web developer? The answer is YES!

2. You can create CLI tools with React

Yes, you read it right. You can create CLI native applications with all those fancy installers, yarn install, npm install, console, loading bars in the terminals, etc. You can create them using React with the framework called INK. This framework allows you to create such applications with ease by using React code and chip them as CLI tools for other people to use.

3. Rendering videos with React

You can also render videos with React with the framework called Remotion so you can write videos in React and export them at 60 fps with all the animations, etc.

4. Using Functional components

Functional components have been here for a while, but they are here to stay especially with all the hooks and craze that is building up, so if you are still on those class-based components, it's time to move on. Start using functional components, and creating new components in functional components. Learn about hooks. The only real use case of class-based components today where a functional component cannot work is error boundaries. But if you have covered your error boundaries in a global singular component then you do not need class-based components in your codebase at all.

5. Importance of key values in React

Have you ever seen those nasty little warnings which appear when it says to give a key prop to the component you are using in a map function? Key values are extremely important in React because they tell React about the component which is getting rendered. It tells React if it should re-render it or not later down the line. If you are not using key values, or worse if you are using duplicate key values you are going to run into a lot of different bugs. So the best way is to go about using keys in React is to always use a unique but deterministic value when you are using a map function. Your values should not change between renders because that will adversely affect the performance.

6. Using React Fragment

React has a very special component called <React.Fragment> which allows you to return multiple components without having a parent component from a single component.

Take a look at the above example, most of us would just use an opening and closing <div> as a parent tag because you know React component has to return a single parent but you can bypass this by using a <React.Fragment> component and the cool thing is that this Fragment component in the newer version doesn't really require you to write a tag name itself so you can create a very cool empty tag opening (<>) and an empty tag closing(</>) as you can see in the below example and it will just work fine.

Another use case of React fragment if you're using the component name itself is that you can specify key prop on that. So if you are using <React.Fragment> in a map function this will work just fine but this will not appear in the actual HTML.

7. You can run react on servers

You can run React on servers and I'm not talking about Next JS. I'm talking about React server components. Last December, the React team gave us a sneak preview of the React server components and how they can work. I have a detailed video on how they work. You can find that link here. It is a pretty cool technology that React has introduced to render pieces of UI on the server.

8. ClassNames v/s Class

Do you know why you always use classNames instead of class while writing the JSX of React. That is because React compiles down to a code like this which you can see below and this code has a problem.

You cannot specify the class as an object property in the older JavaScript. That is not valid JavaScript. If you do, you have to specify that in single or double-quotes. Because a class is a reserved keyword so React team decided to drop a class keyword and use className instead to avoid confusion.

9. Use Typescript

Typescript will help you catch so many errors and so many bugs on compile-time. When you are creating your components, sometimes you might pass wrong data within your components and this will help you speed up and iterate your development speed a lot.

10. Use prop-types

Use prop-types with React to enforce run-time capabilities of prop validation. This means if you're getting some data from an API or some external source where your typescript might be fooled on compile-time but prop types will show a warning which will help you debug the issue even in development mode.

So these were my 10 tips which I believe you would not know in react. If you liked it, make sure you comment down your favorite tip or if you know any new tips about React, please let me know in the comments below.

Join the discussion

Did you enjoy reading the article? Thank the author by sharing it on Twitter.