5 Handy ReactJS Hints You Need to Know (part1)

React is one of the popular fronend Javascript libraries. Many applications are either using it currently or trying to migrate their fronend source code to have a more neat and modern look. In this short post, I will introduce 5 small tips that make your life easier in your development journey with React.

Note: Some of these hints are not specific to React and related to Javascript. They can be used by any Javascript library or framework.

One line If-else

This is a simple but handy thing to know in Javascript that can be used in React. So you simply can write an if-else condition in one line:

let result = condition ? "Yes" : "No"

When the condition is true, the result would be “Yes” and otherwise “No”.

This is especially handy when you want to render something conditionally.

Import file

This is not the only way to use a file in the code, but I like it. Let’s say we have a JSON:

import myFileNameInCode from '/PathToFile.json'

This way, you can directly use the file with the import name anywhere in the code without repeating the file path which can be challenging for code maintenance. (you can name the myFileNameInCode anything you like)

Environment variables

This is very common in any application. Often you need some variables that are used in many parts of the code. Especially when the variable value can change. An example would be the API endpoints you use to fetch data for the frontend.

First, you create a .env file (name has to be .env) in your React application root directory. Inside this .env you can introduce your variables. The variable name has to start with ‘REACT_APP’

REACT_APP_MY_VAR=100

To use it:

let myVar = process.env.REACT_APP_MY_VAR;

Run a function after changing the state

Let’s say you have a state variable name X. You want to run a function after the X gets updated.

There are a couple of ways to do this. One of the ways is: (for a class component)

this.setState({
    X: "newValue"
}, ()=>{
     runMyFunction();
    );
});

Note: the setState is just a function. This means you can put any other function instead of it.

componentDidUpdate infinite loop

This happened to me a lot when I started working with React. componentDidUpdate is an event function that is specific to a class component in React. Every time you update the component state this function automatically gets called. Read More

The usage scenario is usually like when you get a new input for a component and you need to update the component state. The issue is when you update the state React runs componentDidUpdate and the process repeats itself forever.

To avoid this, we usually need to compare the old state var with the incoming input value. If the values are different, then we update.

componentDidUpdate(){
   if(this.props.newValue !== this.state.currentValue){
        this.setState({currentValue: this.props.newValue});
   }
}

I hope you find these tips useful.

The End.