Few useful tips while using ReactJS

Been using react for past two years now, I have learnt few things which are surprising, and also very useful. Below are some tips that might be helpful to understand few concepts in react.

  1. Understanding this.setState
ExampleComponent.js

As shown above, this.setState has few important features in it. It has access to its previous state, props, has an optional callback function, and re-renders the component after the state is updated.

Use these whenever required, also remember there is an optional callback function which will have an updated this.state value when it’s called, this function will be called after the component is re-rendered.

2. Use Higher-Order Components

Higher-Order Components are the functions which take component as an argument and returns a new enhanced component. Use HOC as a boilerplate component, This is a very useful feature when we have state management in the application.

HOC demo example: GitHub

HOCDemoComponent.js

The code snippet above is a HOC which will render the input component + header component.

Using HOC is as simple as making a function call or using annotation method.

App.js

3. Use functional components

Try to use a lot of functional components, this has the following advantages. (Divide and conquer method)

  • Small useful components with Less code
  • It is very easy to understand since each component has its own part to play
  • it is easier to unit test them

4. Define propTypes, Use the prop-types library

npm i prop-types

Use propType and defaultProps for your component.

This will help other developers to understand what kind of props are required, better readability, and explains if its a mandatory props or not with isRequired property.

5. Binding functions to the component

In ES6, React does not auto-bind functions defined within the component. That said, all the functions mentioned within a component will be undefined when you try to use them.

There are several ways to bind the method to this scope

  • Can bind using arrow function in either render or while defining a function
Binding Function 01
  • Can bind using this.functionName.bind(this) in render.
Binding Function 02
  • Can bind using this.functionName.bind(this) in the constructor

Note: This is the best way of binding a function, since its done once while initiating the component properties in constructor

Binding Function 03

6. Use component state variables instead of global/component variable

Do not define any variables as let, var or const unless it is required, instead use the state to hold your local variable, this will allow the local variable to participate in the react life cycle and that makes the component more reactive.

7. Understand react lifecycle methods

React Life Cycle

A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.

componentDidCatch(error, info)

App.js

8. Use React Developer Tool

Chrome has an awesome extension called React Developer Tools, this is very helpful since it helps you see values of props and understand react lifecycle whenever there are any changes in props.

9. Use webpack bundle analyzer

webpack bundle analyzer will create an interactive treemap visualization of the contents of all your bundles.

This module will help you:

  • Realize what’s really inside your bundle
  • Find out what modules make up the most of its size
  • Find modules that got there by mistake and Optimize it!
npm i webpack-bundle-analyzer
webpack config file

Learn more about me here,

www.prashanthpnaika.com
https://www.linkedin.com/in/prashanthnaika
https://github.com/pnaika