10 Awesome React Pro Tips – Know ’em all 🎤
a thread 🧵
a thread 🧵
1⃣ React is 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.
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.
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.
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.
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
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.
5⃣ 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
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.
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.
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.
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.
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
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.
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.
🔟 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
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 our 10 tips which we 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 us know in the comments below.
Loading suggestions...