6 Pro Tips from React Developers
Category : React Js
If you’re new to ReactJs, you could benefit from learning from the success and failure from react.Js developers. Here are the 6 pro tips from react.js developers.
React Developers Pro Tip #1
– Use the functional components, if you do not need internal state or lifecycle methods. Here’s a class-based component, that really ought to be a functional component, now, it’s a pure function that accepts props as this argument and returns a react element. The advantages of functional components are there’s less code so it’s easier to understand the component is stateless so you don’t accidentally store state on a component that you shouldn’t. The component is simpler to test, there’s no this finding and it’s easier to see when and where to extract smaller components which leads me
React Developers Pro Tip #2
– To keep your components small, small components are easier to read tests maintain and reuse, for example, a comment component, it contains a comment div with a user info tip inside of it along with the division for comment text and comment date but if I’m going to use this user info information during my application, I can extract this into its own component. In this case, a functional component is neatly tuck, the user info component within my common component and wherever else in my application that I’ll need it, since I’m now in a functional component I do not require the dots, so they’ll get deleted and if I wanted to make this even more modular I could take out this block of code make it into its own Avatar component, then switch this out and nest avatar, now I will have my Avatar component within my user component, within my common component they are compact and very simple to read Reuse and maintain.
React Developers Pro Tip #3
– Understand how to handle ‘this’ remember tip 1, since functional components don’t require this binding you’ll want to use them whenever possible but if you are using an es6 class you’ll want to bind this manually, since react doesn’t auto bind the functions within that component here are several methods for doing so.
One method is to, Bindin render. So this way is concise and clear and works, but it can cause a little performance issue because a new function is going to be called every time this component re-renders which could be very frequent. Another option is to use an Arrow function render. So this is concise and clear, like method one, but like method one it will also create a new function every time, this component renders another method is to Bind in the constructor. So this is going to resolve the possible performance issues of methods 1 and 2 – just don’t forget to call super here in the constructor, another method is to bind in the Arrow function of a class property. So this is much clean and readable and it’s going to ignore performance issues of methods 1 and 2 and avoids the repetition of method 3, please be aware, however, this method relies on experimental features and it’s not an official part of the ACMA script specification. You can allow experimental language features by installing and configuring the babel package and apps created by a create react app has many features enabled.
React Developers Pro Tip #4
– Use a function in SetState, not an object. According to the react Docs, react does not guarantee that state changes are applied immediately, therefore, reading this state right after calling set state is a potential pitfall, because the dot state may not be actually what you think it is, instead of updating state with an object we can update it with a function. Function will accept the previous state as its first argument, and the props at the time the update is applied as it’s the second argument.
React Developers Pro Tip #5
– Utilize prop types, prop type is a library for type checking props and it can help to prevent bugs by ensuring you are using the right data types for your props, it is an external library so you’re going to install npm or however, you prefer installing then import the library and add prop types to the component, set the data type accordingly and if it’s needed add is required.
React Developers Pro Tip #6
– Use react developer tools, let’s take a look at the features, now looking at any web application built in react, we can notice in the react tab we can view the component hierarchy and if we were to click on a component, we can view the props as well as the state of that component so as you can notice this is a very valuable and very helpful tool to test and debug and really understand what’s happening with your app. If you have any more react tips, I’d love to hear about them in the comments.
Happy coding 🙂