Pro Tips For React Developers 🤠

What is React?

 
React is a JavaScript library for building user interfaces. It is maintained & developed by Facebook and a community of individual developers & companies. React can be used as a base in the development of single-page or mobile applications.
 
Let's see a few pro tips for React development
 

Tip - Use functional components rather than class component

 
This will accept 'props' as an argument and return React's element

Benefits of functional components are as below
  • Easy to understand
  • Less code
  • No 'this' binding
  • Easier to extract into smaller components
  • Stateless
  • Simpler to test

Tip - Use '&&' rather than 'if'

 
 
As per the above code, handling null value using if condition is a bit inconsistent, where '&&' will only be executed once the condition is satisfied totally. So use of '&&' is less coded with ease of understand.
 

Tip - Keep Component Small


Small components are easier to
  • Read
  • Test
  • Re-use
  • Maintain 

Tip - Best way to use 'this'

 
 
 

Tip - Use a function in 'setState' rather than an object


According to React concept, It does not guarantee immediate state change possibility.
 
Function will receive previous state as its first argument, and props at the same time when update applied as its second argument.
 

Tip - Utilize prop-types


It is a library for typechecking props.
 
 

Tip - Separation of Styles

 
There are two approaches to use styling in react
  1. Using external .css or .scss files - easy to implement
  2. Use as a component, use their building styles - a little difficult

Summary


So here we've seen a few pro-tips while we are developing React applications. This React skill is very trending nowadays so by using these tips you can develop your application with a next-level concept and pro skills.