How to create a common Helper class or util file in React JS

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