Preventing Unnecessary Re-Evaluations With React.memo()

What is React.memo() ? Using memo will cause React to skip rendering a component if its props have not changed. This can improve performance. When to use React.memo() ? We can use React.memo if React component: Will always render the same thing given the same props (i.e, if we have to make a network call to fetch some data and there’s a chance the data might not be the same, do not use it)....

January 15, 2023 · 2 min · Daman Arora

Rules of Using React Hooks

Only Call Hooks at the Top Level Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls. Only Call Hooks from React Functions Don’t call Hooks from regular JavaScript functions....

January 13, 2023 · 1 min · Daman Arora

GSoC 2022 Final Report By Daman Arora

GSoC 2022 Final report In this Google Summer of Code 2022 project, I developed the CloudStack-Terraform-Provider by expanding the list of data sources and resources supported by CloudStack. This report summarizes the work conducted from May to September 2022. Project Details Organization: Apache Software Foundation Project: CloudStack Terraform Provider - Add datasources for the existing resources Student: Daman Arora Mentors: Boris Stoyanov, Pearl Dsilva, Harikrishna Technologies used: Go language, Terraform, Apache Cloudstack, Cloud-Monkey Introduction Terraform is an Infrastructure as Code technology that allows users to build immutable infrastructure....

January 10, 2023 · 4 min · Daman Arora

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