Awesome React Tips and Tricks for Beginner

React Tips and Tricks

React is one of the most popular tools found in a web developer’s library, but like anything you need to learn how to use it properly. We have some React Tips and Tricks for the Beginner to create a better app and improve performance.

Let’s find out the best React Tips and Tricks :

1) Name your Components

The best practice is to give the name of each component. If you naming the components it is easy to find the bug.

Even more so, when you use a react-router or third party library it is more effective.

2) How you use your components Name

You need to define the class name or the variable name that hosting components.

React will actually infer the components name in error message.

Bonus Tips: If you use EsLint, you should set two rules.

  • 1) The “extends” :” ”enlint: recommended” property in a configuration file enables rules that report common problems such as for direction, getter return.
  • 2)The ‘—fix’ option on the command line automatically fixes some problems such as no-extra-boolean-cast, no-extra-page-no.

3) Prefer functional components

If you have many components whose purpose is only to display data, take advantage of the many ways to define components.

Both snippets define the same watch components. Yet, the second is way shorter and even drops this to access the props in the JSX template.

4) Replace div with fragments

Every component must expose a unique root element as a template.

The common thing we do is to wrap a template in div.

React is bringing a new feature called “fragments”, with the help of this feature you can replace div with react. fragment.

The output of fragment content without any wrapper.

5) Careful while setting state

React app is dynamic, so you have to deal with a components state.

The use of the state is quite straightforward initialize the state content in the constructor and call setState to update the state.

If you have used a current state and props, for calling setState to set the next state value.

The problem is that react does not ensure that the value of this.state and this.props is as expected as you want. The reason behind this is setState is asynchronous. Because state updates are batch to optimize a DOM manipulation.

To prevent this situation you must use setState with the function parameter. It will provide the proper state and the proper value.

6) Binding components function

There are many ways to bind element events to its components.

The first method appears in react documentation, but unfortunately, it’s not working.

The reason is when you use JSX, this value is not bound to the component instance. But we find out an alternative for this method:

Use the arrow function in JSX. Arrow function will be created again upon each component, rendering it and it will hurt performance.

It will use class field syntax which is the only proposal for ECMAScript.

You have to use a babel to transpile the code. If the syntax is not adopted properly, it will break the code

7) Adopt container pattern (With Redux)

The container design pattern allows you to follow the separation of concern principle in react components.

A single component handles template rendering and user actions in the same place.

Let’s use two components and see the result.

The trick is DatePickerContainer handles user interaction and API calls if necessary. Then it renders DatePicker and supply props.

Thanks to this pattern, the container components replace the presentational components; this functional component becomes useless without props.

If you use Redux as a state manager it also plugs with this pattern.

The connect function injects props into components. In this case, it will feed the controller which will forward those props to components.

That’s the reason both components will be able to Redux data.

For the beginner, is this article is useful for you. Let me know in the comment box.

Start development in react using our some of the best react templates.