useEffect Usecase: Run Side Effect Only Once After Initial Render

Side Effect Runs Only Once After Initial Render You may want to run the side effect just once after the initial render. A typical case will be fetching data making an API call, and storing the response in the state variable after the initial render. You do not want to make this API call again. You can pass an empty array as the second argument to the useEffect hook to tackle this use case....

January 10, 2023 · 1 min · Daman Arora

What Are Side Effects in React and How to Handle Them Effectively

In essence, a react component consists of a function that executes from top to bottom and handles bringing something onto the screen or responding to user input, such as clicking. Whether you use state or other functions in such a function, everything in a component is concerned with bringing something to the screen. A side effect is anything else that occurs within an application. For example, sending an HTTP request or storing something in the browser’s storage....

January 10, 2023 · 2 min · Daman Arora

Write Semantically Better React Code

Using Fragments to solve the problem of </div> Soup When writing a component in React, you can’t have more than one root JSX element. So if you return a value or if you store a value in a variable, that value must only be exactly one JSX element not two or three or four side by side adjacent elements. Due to which, you have to wrap a <div> around all the elements in the return statement, this technically make the return statement to return only one value as a whole....

January 9, 2023 · 1 min · Daman Arora

Type Annotation vs Type Inference vs Type Assertion in Typescript

Type Annotations The following example declares variables with different data types, where the type is specified using :Type syntax after the name of the variable, parameter or property. : var age: number = 32; // number variable var name: string = "John";// string variable var isUpdated: boolean = true;// Boolean variable function display(id:number, name:string) { console.log("Id = " + id + ", Name = " + name); } var employee : { id: number; name: string; }; employee = { id: 100, name : "John" } These are type annotations....

January 9, 2023 · 3 min · Daman Arora

Dealing With Null Data in Javascript Using Nullish Coalescing

The nullish coalescing (??) operator is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand. Earlier, when one wanted to assign a default value to a variable, a common pattern was to use the logical OR operator (||): let foo; // foo is never assigned any value so it is still undefined const someDummyText = foo || "Hello!...

January 9, 2023 · 2 min · Daman Arora