6 Pro Tips from React Developers

if you're new to reiax you could benefit from learning from the success and failure from react developers who learn valuable lessons from using the framework in this episode of open source craft will be giving you 6 pro tips from react developers tip 1 use functional components if you don't need internal state or lifecycle methods use a functional component instead here's a class based component that really ought to be a functional component like so now it's a pure function that accepts props as this argument and returns a react element the benefits 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 to tip to keep your components small small components are easier to read tests maintain and reuse here we have a comment component it contains a comment div with a user info tip inside of it along with the div for comment text and comment date but if I'm going to use this user info information throughout my application I want to extract this into its own component in this case a functional component then I'll this 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 need the this 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 within here now I have my Avatar component within my user component within my common component they are compact and simple to read reuse and maintain tip three 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 bind in render like so this way is succinct and clear and works but it can cause a slight performance issue because a new function is going to be called every time this component re-renders which could be frequently another option is to use an arrow function render like so this is succinct 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 like so this is going to solve the potential 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 like so so this is very clean and readable and it's going to avoid performance issues of methods 1 and 2 and avoids the repetition of method 3 please be aware however that this method does rely on experimental features and it's not an official part of the ACMA script specification you can enable experimental language features by installing and configuring the babel package and apps created by a create react app have many features enabled tip 4 use a function in set state 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 this dot state may not actually be what you think it is instead of updating state with an object like we see here we can update it with a function like so the function will receive the previous state as its first argument and the props at the time the update is applied as its the second argument tip five utilize prop types prop types is a library for type checking props and it can help prevent bugs by ensuring you are using the right data types for your props it is an external library so you're going to want to npm install 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 required add is required tip six use react developer tools let's take a look at the features now looking at a web application built in react we can see in the react tab we can view the component hierarchy and if we were to click on a component such as this one we can view the props as well as the state of that component so as you can see this is a very valuable and helpful tool to test and debug and really understand what's happening with your app if you have any more reactives I'd love to hear about them in the comments if you want to see more content like this go ahead and subscribe thanks for watching and happy coding

Channel: Vue Mastery

Views: 344,828

Rating: 4.8937922 out of 5

Keywords: React, React.js, Redux, node, node.js, learn react

Id: xa-_FIy2NgE

Length: 5min 52sec (352 seconds)

Published: Mon Oct 02 2017