Few useful tips while using ReactJS

Prashanth Naik
Aug 3, 2018 · 3 min read

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.

Image for post
Image for post
  1. Understanding this.setState

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


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.


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

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

Image for post
Image for post
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)


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!
webpack config file

Learn more about me here,




Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store