React Custom Hooks

 Hooks are reusable functions.When you have component logic that needs to be used by multiple components, we can extract that logic to a custom Hook.Custom Hooks start with "use". Example: useFetch.Build a HookSuppose, we are fetching data in our Home component and displaying it. import { useState, useEffect } from "react";import ReactDOM from "react-dom/client";const Home = () => { ...

Continue Reading →

useMemo Hook ReactJS

 The React useMemo Hook returns a memoized value.Think of memoization as caching a value so that it does not need to be recalculated.The useMemo Hook only runs when one of its dependencies update.This can improve performance.PerformanceThe useMemo Hook can be used to keep expensive, resource intensive functions from needlessly running.for example, we have an expensive function that runs on every...

Continue Reading →

useEffect hook in ReactJS

 useEffect(): It enables for performing the side effects in the functional components.Some examples of side effects are: fetching data, directly updating the DOM, and timers.useEffect accepts two arguments. The second argument is optional.useEffect(<function>, <dependency>)We should always include the second parameter which accepts an array. We can optionally pass dependencies...

Continue Reading →

React: Unidirectional data flow

 Unidirectional data flow is a technique that is mainly found in functional reactive programming. It is also known as one-way data flow, which means the data has one, and only one way to be transferred to other parts of the application. In essence, this means child components are not able to update...

Continue Reading →

ES6 Spread Operator

The ES6 (ECMAScript 2015) spread operator is a powerful feature in JavaScript that allows you to expand or spread elements from an array or object into another array or object. It is represented by three consecutive dots (...). Here’s a breakdown of how it works and some common use cases:1. Spreading Elements in ArraysYou can use the spread operator to spread elements of an existing array into a new...

Continue Reading →

ES6 Modules

 ModulesJavaScript modules allow you to break up your code into separate files. This makes it easier to maintain the code-base.ES Modules rely on the import and export statements.ExportYou can export a function or variable from any file.Let us create a file named person.js, and fill it with the things we want to export.There are two types of exports: Named and Default.Named ExportsYou can create...

Continue Reading →

ES6 Destructuring

Destructuring in ES6 (ECMAScript 2015) is a feature that allows you to unpack values from arrays or properties from objects into distinct variables. It provides a more concise and readable way to extract data compared to traditional methods. Here's a breakdown of how destructuring works for arrays and objects:Array DestructuringArray destructuring allows you to extract values from an array and assign...

Continue Reading →

React ES6

 What is ES6?ES6 stands for ECMAScript 6.ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.Why Should We Learn ES6?React uses ES6, and you should be familiar with some of the new features like:ClassesArrow FunctionsVariables (let, const, var)Array Methods like .map()DestructuringModulesTernary...

Continue Reading →

React state and props

 React StateEvery component in react has a built-in state object, which contains all the property values that belong to that component.In other words, the state object controls the behaviour of a component. Any change in the property values of the state object leads to the re-rendering of the component.Note- State object is not available in functional components but, we can use React Hooks to...

Continue Reading →

Virtual DOM in ReactJS

 Why was virtual DOM introduced? DOM manipulation is an integral part of any web application, but DOM manipulation is quite slow when compared to other operations in JavaScript. The efficiency of the application gets affected when several DOM manipulations are being done. Most JavaScript frameworks...

Continue Reading →