Top 3 mistakes to avoid when using React

Original Article Published At YourQuorum

Respond is a superb JavaScript library for building UIs. Utilizing Respond, you can make delightful applications easily and can involve TinyMCE as your Respond WYSIWYG manager. Nonetheless, similar as whatever else, in the event that you don't utilize Respond as expected, you could wind up making a bigger number of issues than you tackle. You could stall out on a bug that is difficult to follow, wind up composing spaghetti code, or more terrible - you could need to rework a large portion of your application in the event that you don't keep some significant "gotchas" as a primary concern. So how about we get straight into six normal missteps to keep away from while utilizing Respond.

1. Try not to make God parts

Respond's structure blocks are parts. A part is utilized to characterize a contained and reusable piece of the UI so you can zero in on how it functions in segregation, and afterward likewise the way that it works related to different parts in a composable framework. A few instances of parts are components like navbars, information tables, and clock gadgets.

God parts are parts that do excessively - they are solid, and not reusable. Building a whole page with all the UI components stuffed into a solitary part, is by and large viewed as an enemy of example in Respond.

For instance, a Divine being part could look something like this:

import React, { Suspense } from 'react';

function MyComponent() {
  return (  
    <div>  
      <div>    
        { // Map related HTML }
      </div>   

      <div>
        { // Chart related HTML }
      </div>

      <div>    
        { //Datatable HTML }
      </div>   

    </div>  
  );  
}

Solution

Contribute an opportunity to distinguish the different related pieces of your application, and lift those parts into their own parts. By separating them along these lines, each part is simpler to keep up with and recompose where required.

Utilizing the model above, we can part this God part into different parts:

//DataTableComponent.js
import React, { Component } from 'react';

class DataTableComponent extends Component {
  render() {
    return (
      <div>
        { //Datatable HTML }
      </div>
    );
  }
}

export default DataTableComponent;

//ChartComponent.js
import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file

class ChartComponent extends Component {
  render() {
    return (
      <div>
        { //Chart related HTML }
        <Button color="red" action="home"/>
      </div>
    );
  }
}

export default ChartComponent;

//MapComponent.js
import React, { Component } from 'react';

class MapComponent extends Component {
  render() {
    return (
      <div>
        { //Map related HTML }
      </div>
    );
  }
}

Then, at that point, these parts can be joined to shape the total arrangement:

import React, { Suspense } from "react";

const DataTableComponent = React.lazy(() => import("./DataTableComponent"));
const ChartComponent = React.lazy(() => import("./ChartComponent"));
const MapComponent = React.lazy(() => import("./MapComponent"));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading. Please Wait...</div>}>
        <section>
          <DataTableComponent />
          <ChartComponent />
          <MapComponent />
        </section>
      </Suspense>
    </div>
  );
}

Note: In this model, we're involving lethargic stacking as well as Respond's inbuilt Tension part to further develop responsiveness of our application.

1. It's not a good idea to modify the state directly

State in Respond ought to be permanent - you shouldn't alter state straightforwardly, on the grounds that doing so can cause mistakes and execution gives that are challenging to troubleshoot. Think about the accompanying model.

const modifyCarsList = (element, id) => {
  carsList[id].checked = element.target.checked;
  setCarsList(carsList);
};

Here, we are attempting to refresh the checked key of an item in a cluster in light of the condition of a checkbox. The issue here is that Respond can't notice and set off re-delivering from that change on the grounds that the item is being changed with a similar reference. A significant issue with this is because of the nonconcurrent idea of the state - any forthcoming state change could undoubtedly supersede these immediate alterations.

Solution

To refresh the state, utilize either the setState() technique in class-based parts or the useState() snare with utilitarian parts. These strategies guarantee that the progressions are perceived by Respond, and the DOM is re-delivered appropriately.

We can modify the past guide to fill in true to form with the useState() strategy. We additionally use guide() and spread language structure to try not to unintentionally transform other state values.

1. Remember that setState is asynchronous

In the past tip, we discovered that we ought to utilize setState() to alter our application's state. Nonetheless, setState() isn't simultaneous! That implies any adjustments don't produce results right away and may produce results on the following render. This is valid for useState() (Respond Snares) too. Respond can likewise clump different update assembles to streamline execution. It does this naturally. Thusly, getting to a state esteem just in the wake of setting it probably won't recover the most reliable outcomes.

For instance:

handleCarsUpdate = (carCount) => {
  this.setState({ carCount });
  this.props.callback(this.state.carCount); // Old value
};

Solution

You can fix this issue by giving a discretionary second boundary to setState(), which is a callback capability. This callback capability is called after the state is refreshed with your change.

For instance:

handleCarsUpdate = (carCount) => {
  this.setState({ carCount }, () => {
    this.props.callback(this.state.carCount); // Updated value
  });
};

Be that as it may, the interaction contrasts somewhat for Respond Snares since they don't uncover a callback contention like setState(). For this situation, we can utilize the useEffect() snare to accomplish a similar outcome.

For instance: