Forem: Borneel B. Phukan

9 React Hooks that you should be aware of as a Frontend Developer

Borneel B. Phukan — Mon, 01 Apr 2024 16:54:45 +0000

React is perhaps the most popular frontend framework as of 2024, and also the most rapidly evolving framework. Hence a lot of frontend developers spend countless hours trying to master the concepts in the framework. For beginners getting started with React, it is essential that developers learn the concepts of React hooks. But what are React Hooks? React Hooks are special functions that allow React components to manage stateful logic, side effects and “hook into” React state and lifecycle features without using a class component. These hooks streamline the development process and also enhance code readability and reusability. In this blog post, we'll explore ten essential React Hooks that React developers should be familiar with. Whether you're a seasoned developer or just getting started with React, understanding these hooks is key to harnessing the full potential of the framework.

1) useState: This is the most basic react Hook function that allows state management in functional components. This hook declares a state variable, which is preserved after the component exits, unlike normal variables which disappear after the functional component exits. The only argument that it holds is the initial state which can be a number, string or a boolean. This hook returns a pair of values, which are the current state, and the function updating it. Hence it is defined as:

const [counter, setCounter] = useState(0);

Here counter is the current state, setCounter is the function that will update the value of the current state, when the user performs some activity and 0 despite being the initial state, also defines what type of state it will be. To give an idea of how it looks like in code, here is an example:

import React, { useState } from 'react';
export default function functionalComponent() {
    const [counter, setCounter] = useState(0);
        return (
            <div>
            <p>Counter value: {count}</p>
            <button onClick={() => 
                setCounter(counter+1)}>Increment</button>
            </div>
        );
    }

2) useEffect: Oftentimes, developers want to give abilities like fetching data, subscribing to an event or DOM manipulation to a component. These activities are called side effects and can be added to a component using the useEffect hook. useEffect tells React what the component should do after it renders. The useEffect hook is called within the scope of the functional component and anything that's written within useEffect() is called after the component is fully mounted. It is important to remember that side effects in React exist in two types: without cleanup and with cleanup. This is how it looks like when useEffect contains no cleanup function:

import React, { useState, useEffect } from 'react';
export default function functionalComponent() {
  const [counter, setCounter] = useState(0);
useEffect(() => {
    document.title = 'Counter: ${count}';
  });
  return (
    <div>
      <p>Counter value: {counter}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

useReducer: This is a React hook that is similar to useState but is useful when managing more complex state logic, for example when managing a state that involves multiple sub-values or when the next state depends on the previous one. The useReducer hook is used to store and update states. This hook combined with other in-built hooks like useContext, can act as a good alternative for other global state management tools like Redux or Recoil. The reducer hook requires two important arguments, a reducer function and an initial state. The reducer function is a function that takes the current state and an action, and returns the new state based on the action. Here is an example:

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

In this reducer function, the actions are increment and decrement and it increases and decreases the value of state respectively. This reducer function is then used in the useReducer hook in the following way:

const initialState = { counter: 0 }
const [state, dispatch] = useReducer(reducer, initialState)

This useReducer() hook has an array with two elements. The state contains the current state of the component, and the dispatch is a function that is used to dispatch actions to the reducer function (you may pass a third optional argument like initialFunc, if needed). When an action is dispatched, the reducer function is called with the current state and the action object, and it returns the new state.

The combined code makes the useReducer hook example look like this:

import React, { useReducer } from 'react';
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};
export default const Counter = () => {
  // State initializer with useReducer
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

4) useContext: Before we go ahead learning about this important hook, we need to understand what is a Context in React. A context is a feature that permits passing of data through the component tree without having to pass component props manually at every level. It prevents code duplication and better code readability. When Context is used within a React functional component, useContext hook is used to access the values within this context. useContext allows components to subscribe to a context created by a React.createContext provider component and access its current value within the component tree.
Let us see how it is used. First, we need to create a React context in the following way:

import React, { createContext } from "react";
const MyContext = createContext();

This function returns a Context object, which consists of a Provider component and a Consumer component. The Provider component is used to wrap the part of the component tree where you want to share the context, while the Consumer component is used to consume the context value. Let's presume, the Context has a provider which is defined in the following way:

<MyContext.Provider value="Context Provider value">
      <ChildComponent />
</MyContext.Provider>

The context will be shared in the component. So let us define the ChildComponent:

import React, { useContext } from 'react';
export default const ChildComponent = () => {
  const contextValue = useContext(MyContext);
  return <div>{contextValue}</div>;
};

The Context values that have been provided to the child component needs to be accessed. Hence here we can use the useContext() hook. The useContext has only the Context object as an argument. It is worth remembering that the Context object does not necessarily hold the information but only represents the type of information provided or read from components.
As per the code, the context values are accessed and stored in the contextValue variable. To summarise it, the complete example is as follows:

import React, { createContext, useContext } from "react";
const MyContext = createContext();
<MyContext.Provider value="Context Provider value">
      <ChildComponent />
</MyContext.Provider>
const ChildComponent = () => {
  const contextValue = useContext(MyContext);
  return <div>{contextValue}</div>;
};

5) useCallback: Imagine a situation where you have to call a computationally intensive function every time the component is rendered and re-rendered. This will make your component consume more resources and thereby impact your web application’s overall performance. Hence there should be a way for the resource intensive function definition to be cached and called only when it is needed, without having to re-render the function definition everytime. This is when the useCallback() hook comes handy. This hook is perhaps one of the most important hooks that was introduced in React v16.8.0 onwards.
This hook should always be called at the top level of the component. The function has two parameters: a function that needs to be cached, and a list of reactive values (dependencies) which are referenced inside the function. It may be props, states, or any other values referenced inside the function. Here is an example of how useCallback is used:

import React, { useState, useCallback } from 'react';
export default const functionalComponent= () => {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);
  const [multiplier, setMultiplier] = useState(1);
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + step * multiplier);
  }, [step, multiplier]);
  return (
    <div>
      <p>Count: {count}</p>
      <p>Step: {step}</p>
      <p>Multiplier: {multiplier}</p>
      <button onClick={() => setStep(step + 1)}>Step++</button>
      <button onClick={() => setMultiplier(multiplier + 1)}> Multiplier++</button>
      <button onClick={increment}>
      Increment
    </button>
    </div>
  );
};

Here I have defined three state variables which will be used in the useCallback hook. It has three different buttons which increase the different state values. The Increment button uses the increment callback function from the useCallback() hook, which has already been calculated and needs no additional re-rendering every time the component renders.

6) useMemo: Like useCallback, useMemo is also a default React hook used for memoizing expensive computations in functional components. In other words, it is used to cache the value of a calculation between renders. Here the value of expensive function calls are stored and only returned when the same inputs occur again. This optimizes the web application’s performances by preventing unnecessary recalculations, thereby saving time and computational energy.

The useMemo() hook has two arguments: a function and a dependency array. The function represents the expensive computation that needs to be performed and memoized, and the dependency array stores the values, which when changed triggers the recalculation of the cached results or the memoized value. When there is no change in the values of the dependency array, the cached memoized value is called, instead of unnecessarily recomputing the function in the hook, thus avoiding unnecessary resource utilization. Given here is an example of using the hook:

import React, { useState, useMemo } from 'react';
export default function MyComponent() {
  const [value, setValue] = useState(0);
  const memoizedValue = useMemo(() => {
    // Expensive Computation
    console.log("Calculating memoizedValue...");
    return value * 2;
  }, [value]); // Recompute memoizedValue only if 'value' changes
  return (
    <div>
      <div>Value: {value}</div>
      <div>Memoized Value: {memoizedValue}</div>
      <button onClick={() => setValue(prevValue => prevValue + 1)}>Increment Value</button>
    </div>
  );
};

Here the memoizedValue will only be recalculated if the value of the useState hook changes (using the increment button). The console.log message is only logged when the memoizedValueis recalculated.

It is worth remembering that the only difference between useCallback() and useMemo() hooks is that useCallback() returns the memoized callback function itself while the useMemo() returns the memoized value.

7) useRef: If you wish to prevent specific values, states, or portions of the DOM from triggering re-renders in your component, the useRef hook comes very handy. It allows you to store mutable values that don't re-render when the component updates, as well as being used for the retention of references to DOM elements.
When the component renders, states and variables are reset, but certain scenarios might require the state or variables to be preserved across re-renders. Here, the useRef Hook proves its utility by enabling the creation of references to values that persist between renders.

Also the useRef Hook plays a crucial role in handling DOM elements within React. Directly accessing and modifying DOM elements can be challenging without the useRef Hook. Utilizing useRef, you can acquire references to specific DOM elements and perform operations on them, thereby obviating the necessity for external libraries or intricate workarounds.

References variables can be created in the following way:

import { useRef } from 'react';
const refVar = useRef();

And can be defined as:

<div ref={refVar}>Reference variable</div>

The reference value can be accessed using the .current property in the following way:

const refValue = refVar.current;
console.log(refValue);

Now if you have to perform DOM manipulation using useRef hook, it can be done in the following way:

import React, { useRef } from 'react';
export default function App() {
    const inputRef = useRef(null);
    const focusInput = () => {
        inputRef.current.focus();
  };
    const clearInput = () => {
        inputRef.current.value = '';
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
      <button onClick={clearInput}>Clear Input</button>
    </div>
  );
}

Here we define an inputRef using the useRef hook, and two functions, focusInput and clearInput. These functions focus on the input element, and clear the input field respectively, which is possible thanks to the use of inputRef reference hook.

8) useTransition: Often, when a component contains multiple states and state changes, the UI can be blocked for the user, causing poor user experiences. Hence in order to enforce smooth transition, while at the same time managing multiple state changes, the useTransitionhook comes very useful. It helps in the smooth transitioning or change of the UI when the value of state changes.

The useTransitionhook is declared in the following way: const [startTransition, isPending] = useTransition(). It returns an array containing two items. The isPendingflag tells if a transition is pending and the startTransitionfunction triggers the state update as a Transition.
Let us look at an example as to how it is used:

import React, { useState, useTransition } from 'react';
export default function TransitionExample() {
const [showText, setShowText] = useState(false);
const [isPending, startTransition] = useTransition();
const handleClick = () => {
  startTransition(() => {
    setShowText(!showText);
  });
};
  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        Toggle Text
      </button>
      {isPending ? (
        <p>Transitioning...</p>
      ) : (
        <div
          style={{
            opacity: showText ? 1 : 0,
            transition: 'opacity 0.5s ease-in-out',
          }}
        >
          {showText ? 'Hello world!' : 'Goodbye world!'}
        </div>
      )}
    </div>
  );
}

This code has a boolean state called showTextwhich is used to show or hide a default set of text, and a useTransitionhook with a duration of 500 milliseconds. The useTransitionhook is triggered on clicking the “Toggle Text” button and when isPendingstate is false, it smoothly transitions to the second condition, a courtesy of the useTransitionhook.

9) useId: This React hook is used for creating unique IDs for HTML forms that are unique across the React application and persist between re-renders. The unique ID exists until the component is removed and another unique ID is generated when re-inserted. The use of the useId hook is plain and simple:

function Form() {
const usernameID= useId();
const nameID= useId();
const emailID= useId();
return (
   <>
     <label for={usernameID}>Username</label>
     <input id={usernameID} type="text" placeholder={'Generated id --> ${usernameID}'} />
     <label for={nameID}>Name</label>
     <input id={nameID} type="text" placeholder={'Generated id --> ${nameID}'} />
     <label for={emailID}>Email</label>
     <input id={emailID} type="email" placeholder={'Generated id --> ${emailID}'} />
   </>
 )
}

Here I am creating 3 unique IDs using the useId hook. This ID is unique all across the React App and persists across multiple renders. However it will only be removed upon the removal of the component and on re-inserting the unique ID changes.

In conclusion, React hooks offer powerful tools for state management, side effects, and performance optimization. In this post, we've explored ten essential hooks—from useState for state management to useId for unique IDs.

Mastering these hooks is crucial for developers, enhancing code readability and unlocking React's full potential. Whether you're a beginner or seasoned pro, integrating these hooks into your projects can streamline development and improve user experiences.

So, dive in, experiment, and elevate your React skills. With hooks, the possibilities are endless. Happy coding!

4 Commonly used Software Architectures that you should be aware of as a Software Developer

Borneel B. Phukan — Thu, 04 Jan 2024 23:54:22 +0000

During the development of huge-scale software systems, the team of developers often has to face multiple issues related to scalability, integrity, maintainability, extensibility, cost efficiency and much more. With increasing size, there is a problem of increasing complexity, repository management, coordination and communication. All these factors often enforce the requirements for a well-defined structure which all the team members and the stakeholders of the development process can agree upon. This structure must help the team of developers organize the code in a systematic order, set boundaries within multiple developer teams, and at the same time, make it easier for developers to maintain and extend the codebase for future releases. This is what Software Developers terms as Software Architectures.

With the rapid increase in software development during the past two decades, industries have come up with multiple software architectures and will continue to develop more architectures as per convenience. However, with the increasing demand for scalability, maintainability and cost efficiency, certain architectures have gained special favourability over others. Today in this blog, we will analyze some of the most important aspects of these favoured software architectures, and help you determine which software development architecture might be the most favourable one for your project.

Monolithic Architecture

Monolithic Architecture is a more traditional architecture, where all the smaller components and units are interconnected and interdependent. The software being developed is called a Monolith (derived from the geological term ‘monolith' which means a single massive rock), and the whole software system is designed and deployed as one single unit. Like in any traditional software system, this monolith is self-contained, stores and retrieves data from a shared common database, a single API can perform multiple functions, independent from other applications and overall, the codebase remains the same.

Before choosing this software architecture, the developer must know the scope and the size of the software his team is building. Because the monolith software being developed has all of its components present cohesively as one single unit (single-tiered structure), the software module often grows to be one gigantic unit. Furthermore, all the modules and components used while developing the monolith are tightly interdependent. This means, that making a change to a particular module or component might require making changes in multiple modules and components. This often increases the need for documentation, which also has its disadvantages, like reduced time devoted to development and more time devoted to documentation.

Monoliths are known for easier deployment and debugging, with simplified end-to-end testing thanks to it being a single centralized unit. However, it is known to have a slower development speed because of the complexity associated with it, i.e. larger the monolith, the slower the development. And since individual components are interdependent, scaling of individual components is nearly impossible. Unlike in other software architectures, monoliths often support only one technology stack and any technology to the technology stack like programming languages, frameworks and libraries.

Therefore companies often prefer this architecture when the scope and size of the developed software are small and manageable with documented guidance, a consistent technology stack and one major release.

Service Oriented Architecture

Unlike a monolithic architecture, in a service-oriented architecture the huge monolith application is divided into smaller chunks of self-contained units with a definite business functionality or task process. These units are called services and they are built to be loosely coupled with each other, which means they must have minimal dependencies on each other. The gigantic monolith software or IT infrastructure is broken down into smaller independent and manageable services with its codebase and databases. The services interact with each other using standard protocols like HTTP, SOAP or REST.

Each independent service has its unique business purpose and can be developed, deployed and independently scaled. Unlike monolithic architecture, the codebase of each service is isolated from each other and a failure in one service does not result in the overall failure of the application or the IT infrastructure. Because of this, the developers have more freedom to experiment and innovate with new features and roll back if they face any problems. Depending on the requirements, each of the services of microservices can be developed and maintained with a different technology stack and yet be compatible with each other thanks to their loose coupling and communications through well-defined APIs.

Despite having a better advantage than a monolithic architecture, SOA has an enterprise-oriented scope because SOA promotes resource-sharing, enabling the implementation of common data governance standards across different services. Therefore companies usually adopt this mode of architecture when they have to build and maintain enterprise-level IT infrastructures. Some of the examples of SOA can be attributed to all the CRM and ERP applications being used in the market.

However, what if the scope needs to be increased to the application level? For that, the service granularity, maintainability as well as the speed needs to be increased. For that, we need to look at and analyse the next software architecture.

Microservices Architecture

Microservices architecture is the most popular and widely used architecture in modern-day IT infrastructure scenarios. It takes a more granular approach than service-oriented architecture, dividing the services into even smaller self-contained services. It came up as a response to counter the limitations of Monolithic Architecture and to provide an application scope rather than an enterprise scope. A large number of companies are now transitioning from a monolithic architecture to a microservices architecture while developing and maintaining applications and IT infrastructures. But in which circumstances should one use this architecture and what are the limitations? Let's find out now.

Similar to service-oriented architecture, in a microservice architecture, the services are further broken down into self-contained units with each service having its distinct business purpose, which too can be independently developed, deployed and scaled by the respective individual developer or team of developers. Each of these independent services has its API endpoints through which it communicates and exchanges data with the other independent services, and as a result, gives the perception of it acting as a single unit.

The focus is on scalability and to have a decentralized architecture where each service is independently developed and managed. Like service-oriented architecture, the codebase of each service is isolated from each other and a failure in one service does not result in the overall failure of the application or the IT infrastructure. Each microservices can also be developed and maintained with a different technology stack without compromising their compatibility. Tools like Docker and Kubernetes play a pivotal role in enforcing microservices architecture by turning these services into distinctive containers.

As each service is developed and deployed individually, there are no issues of downtime or redeployment of the entire IT infrastructure. Microservices architecture does not reduce the complexities of development but instead breaks down complex tasks into more manageable units. It has helped companies to increase deployment speed, reduce cost, and ensure higher performance. Compared to SOA, microservices architecture is also known to be faster, and easier to manage due to its granularity. However, this architecture also has its downsides, like requirements for a new level of communication within the various teams working on different services, and exponential infrastructure costs for each of the microservices. Having a proper management and communication channel is of utmost importance for implementing microservices architecture.

Today with the growing number of users and the increasing demands for scalability, companies like Netflix, Atlassian, Spotify, Uber, etc. all migrated from Monolithic architecture to Microservices architecture and this has helped them keep their huge-scale software systems running without causing any major downtime. This architecture is highly recommended for companies seeking to develop a massively huge IT infrastructure that is more scalable with time, each service having the capacity for hefty functions and ensuring continuous development and deployment.

Client Server Architecture

Client-server architecture is a software architecture used mostly by web applications. Here the complex tasks and workloads of managing a web or network application are broken down between a server and a client. The server and the client may be present within the same system or may be distinct nodes within the same computer network. The client makes resource or service requests to the server and the server returns the requested resources or services to the client. A server may accommodate multiple clients, and simultaneously exchange 'requests' and 'responds' to all the clients at the same time.

In this architecture, the client any mobile or computer application capable of making requests to the server module, and the server is any powerful computer or software application that can process and handle client requests. The communication between a client and a server is established by the client sending an HTTP request to the server. The server then accepts and processes the request, and then responds through the same HTTP request channel. The client-server architecture can be further divided into three sub-types:

Two-Tier Architecture: In this architecture, the client directly interacts with the server using a standard protocol like HTTP or TCP/IP. This architecture is often used in small-scale applications such as a web application.
Three-Tier Architecture: Here an intermediate layer between the server and the client is introduced which is called Middleware. The middleware layer contains the logic for handling and prioritizing communications between the server and multiple other clients. This architecture is used in larger and more complex systems.
N-Tier Architecture: This is an extension of the Three-Tier Architecture, that has more layers for specific functions for scalability and maintainability.

If ensuring scalability and resource sharing (database, files, processing power) between multiple users (clients) despite having centralized management (server module) is the goal, then Client-Server architecture is just the perfect choice for your IT infrastructure or software systems. However, the downside to this architecture is that a failure in the server will bring down the entire system. The complexity involved in setting up the Client-Server architecture is immense and the cost of maintaining a robust server can also be expensive. Therefore it is important to check the business requirements before implementation of this architecture.

Two examples of a Client-Server architecture are Database Management Systems, where users write queries to interact with the servers and Web-based Applications.

So in conclusion, a development project's success greatly depends on the software architecture selected. The monolithic architecture works effectively for smaller projects with clear objectives because of its ease of deployment but difficulties with scalability. Because it allows for resource sharing and modularity, Service-Oriented Architecture (SOA) is a suitable design for IT infrastructures at the enterprise level. Nonetheless, because of its decentralized and granular architecture, microservices architecture has emerged as the standard for contemporary IT infrastructures, allowing for the autonomous creation, implementation, and expansion of services. For scalability and continuous development, businesses like Netflix and Uber have made the switch to microservices architecture with success. Furthermore, the Client-Server architecture and its variations support web applications that need to be scalable, but they come with complexity and cost as well as the danger of a failure of the system as a whole. In the end, the best architecture will depend on the particular requirements, objectives, and scope of the project to ensure flexibility and success in the ever-changing software development industry.