React util file

How to create a common Helper class

πŸ’‘ Create a folder named util inside the src folder.

πŸ“src >
> πŸ“util

πŸ’‘ Let’s create two JS files named Helper.js and util.js.

πŸ“src >
> πŸ“util
– 🟠Helper.js
– 🟠util.js


πŸ’» Helper.js

This is a Class file that contains several commonly used methods with static type. The advantage of creating such a helper class is that we can write all required common methods in a single place and can use them in multiple components. It increases code reusability and maintainability.

We can create multiple helpers or common class files as per our code structure.

We can access any method by ClassName.MethodName

class Helper {
  // Simple function
  static printSum = (a, b) => {
    return a + b;
  };

  // Simple function
  static multiply = (a, b) => {
    return a * b;
  };

  // Return Promise
  static getPromiseData = () => {
    return Promise.resolve({ name: "JsMount", id: 123 });
  };
}

export default Helper;


πŸ’» Use in Component.js file

import React, { useEffect, useState } from "react";
import Helper from "./../../util/Helper";

const ComponentA = (props) => {
  const [user, setUser] = useState({});

  useEffect(() => {
    Helper.getPromiseData().then((res) => {
      setUser(res);
    });
  });

  return (
    <>
      <h6>Sum of two number (8,4) using Helper.js - {Helper.printSum(8, 4)}</h6>
      <h6>
        Multiply of two number (8,4) using Helper.js - {Helper.multiply(8, 4)}
      </h6>
      <h6>Below data is coming through Promise Resolve from Helper class</h6>
      <p>User: {user.name}</p>
      <p>Id: {user.id}</p>
    </>
  );
};

export default ComponentA;
 Helper.getPromiseData().then((res) => {
      console.log(res) // get data
    });
Helper.printSum(8, 4)
Helper.multiply(8, 4)


πŸ’» util.js file

This file contains all utility exposed functions and directly available into other classes and components.
Here we need to expose every function which we want to use outside while in the Helper Class file we don’t expose methods directly, we expose only class.

We can create multiple util files as well as per our code structure.

export function addTwoNumber(number1, number2) {
  return number1 + number2;
}

export function getUserName() {
  return "JS Mount";
}

export function getNameArray() {
  const data = [];
  for (let i = 0; i < 50; i++) {
    data.push("JS-" + i);
  }
  return data;
}


πŸ’» Use of util.js in Component

import React from "react";
import { addTwoNumber, getUserName, getNameArray } from "./../../util/util";

const ComponentA = (props) => {
  return (
    <>
      <h3>Welcome to Router Component A</h3>
      <h6>Called util function: Username is {getUserName()}</h6>
      <h6>Sum of two number (3,4) using util.js - {addTwoNumber(3, 4)}</h6>
      Total Names: {getNameArray().length}
      <ul>
        {getNameArray().map((name) => {
          return <li>{name}</li>;
        })}
      </ul>
    </>
  );
};

export default ComponentA;
{
  getNameArray().map((name) => {
          return <li>{name}</li>;
  })
}
addTwoNumber(3, 4)




πŸ’‘ JAVASCRIPT INTERVIEW QUESTIONS

βœ” JavaScript Top Interview questions & Answers You should know

βœ” JavaScript Interview Questions & Answers for Experienced – Part 2

βœ” JavaScript Interview Question to Write Programs for Experienced – Part 1

βœ” JavaScript Interview Questions & Answers for Experienced – Part 1

βœ” Top Interview Questions and Answer of HTML 5 Canvas

βœ” JavaScript Console Interview Questions | Input Output Program

βœ” JavaScript Hoisting Interview Questions & Answers | Console Programs




πŸ’‘ DATA STRUCTURE & ALGORITHMS

βœ” JavaScript Rotate 2D matrix 90 degrees clockwise | Top Interview Question

βœ” HashTable Data Structure in JavaScript with Add Delete & Search Algorithms

βœ” Trie Data Structure – Insert Search Delete & Print Program with JavaScript

βœ” Top JavaScript Commonly asked Algorithms in Interview

βœ” JavaScript String Permutation Program with nice explanation

How to create a common Helper class

Leave a Reply

Your email address will not be published.