Friday, December 23, 2022

Best Practices in React Development

Photo by Lautaro Andreani on Unsplash

1.    Folder Structure

Component-centric file structure should be used which implies that all the files related to a different component (like test, CSS, JavaScript, assets, etc.) should be kept under a single folder.

For ex:











2.    HOC

It’s an advanced technique in React which allows reusing component logic inside the render method. An advanced level of the component can be used to transform a component into a higher order of the component. For example, we might need to show some components when the user is logged in. To check this, you need to add the same code with each component. Here comes the use of the Higher-Order Component where the logic to check the user is logged in and keep your code under one app component. While the other components are wrapped inside this.


3.    Decompose Big Component

Try to decompose large components into small components such that component performs one function as much as possible. It becomes easier to manage, test, reuse and create a new small components.

4.    Use Functional or Class Components based on Requirement

If you need to show User Interface without performing any logic or state change, use functional components in place of class components as functional components are more efficient in this case.

Try to minimize logic in React lifecycle methods like:



These cannot be used with functional components, but can be used with Class components.

While using functional components, you lose control over the render process. It means with a small change in component, the functional component always re-renders.


5.    Naming and Destructuring Props

Use meaningful and short names for props of the component. Also, use props destructuring feature of function which discards the need to write props with each property name and can be used as it is.

6.    Use propTypes for Type Check

It is a good practice to do type checking for props passed to a component which can help in preventing bugs. Please refer below code for how to use


7.    Naming Conventions

Use PascalCase in components, interfaces, or type aliases. 

Use camelCase for JavaScript data types like variables, arrays, objects, functions

8.    Avoid Unnecessary DIV tags



9.    Remove Unnecessary Comments

Add comments only where it’s required so that you do not get confused while changing code at a later time.

Also don’t forget to remove statements like Console.log, debugger, unused commented code.


10.The Rule of Max 3 props inline

When there are three or fewer properties, then you should keep those properties in their line inside both the component and the render function.

Less than 3 props:

More than 3 props:


11.Use shorthand for Boolean props

BAD:<RegistrationForm hasPadding={true} withError={true} />

GOOD:<RegistrationForm hasPadding withError />


12.Avoid curly braces for string props

BAD:<Paragraph variant={"h5"} heading={"A new book"} />

GOOD:<Paragraph variant="h5" heading="A new book" /> 

13.Write a fragment when a DIV is not needed


14.Integrate self-closing tags when no children are needed

BAD: <NavigationBar></NavigationBar>

GOOD: <NavigationBar />


15.Apply ES6 Spread Function

Using ES6 methods to send an object attribute would be a more straightforward and effective method. All of the object’s props will be automatically inserted if the phrase “…props” is used between the open and close tags.


16.Using Map Function for Dynamic Rendering


17.Use ES6 Spread Operator

18.Use Ternary Operators



19.Use Object Literals




20.Don't Define a Function Inside Render




21.Use Memo


Although the child component should render only once because the value of count has nothing  to do with the ChildComponent . But, it renders each time you click on the button.


Now, no matter how many times you click on the button, it will render only when necessary.

22.CSS in JavaScript



23.Use Object Destructuring



24.Avoid using string concatenation.

BAD: const userDetails = + "'s profession is" + user.proffession

GOOD: const userDetails = `${}'s profession is ${user.proffession}`


25.Import in Order



The rule of thumb is to keep the import order like this:

  • Built-in
  • External
  • Internal


26.Use Implicit return






Use double quotes for JSX attributes and single quotes for all other JS.




Monday, December 19, 2022

What is Web3?

Photo by Shubham Dhage on Unsplash

The current internet is largely centralized, with a few large companies and organizations controlling much of the infrastructure and data on the web. This centralization can make it easier for these entities to censor or manipulate information, and it can also make it easier for hackers to access or tamper with data.

Web3 technologies aim to address these issues by creating a decentralized infrastructure for the internet that allows for more secure and transparent interactions. They enable users to own and control their own data, rather than relying on centralized entities like companies or governments to store and manage it for them. This decentralized structure is designed to be more resistant to censorship and tampering, and can provide a more secure and private online experience for users.

Overall, the main difference between the current internet and web3 is the degree of centralization and the level of control that users have over their data and interactions. Web3 technologies aim to create a more decentralized and secure internet, while the current internet is largely centralized and controlled by a few large entities.

Web3, also known as the "Decentralized Web" or "Web of Trust," is an umbrella term that encompasses a wide range of technologies, protocols, and applications that aim to give users more control over their online data and interactions. Web3 is a diverse set of protocols, technologies, and applications that aim to create a more decentralized and secure internet. Some of the main technologies used in web3 include:

  • Blockchain: A decentralized, distributed ledger technology that allows for the secure and transparent storage and transfer of data.
  • Cryptocurrency: A digital currency that uses cryptography for secure financial transactions.
  • Decentralized Autonomous Organizations (DAOs): Organizations that are run using smart contracts and decentralized governance mechanisms.
  • Decentralized Applications (DApps): Applications that run on a decentralized platform, such as a blockchain, and are not controlled by a single entity.
  • InterPlanetary File System (IPFS): A decentralized file storage system that allows for the secure and efficient distribution of large amounts of data.
  • Decentralized Identity (DID): A system that allows users to own and control their own digital identity, rather than relying on a central authority.

These technologies are often used in combination to create decentralized platforms and applications that can provide a more secure and transparent online experience for users. They have the potential to revolutionize a wide range of industries, including finance, healthcare, and education.

Web3 technologies are still in their early stages, and there are many challenges to be overcome before they can be widely adopted. However, they have the potential to revolutionize the way we use the internet and could have a major impact on industries such as finance, healthcare, and education.

For example, one of the main benefits of using a decentralized platform for healthcare is that it can provide a higher level of security and privacy for patients' personal and medical data. With traditional centralized systems, sensitive health information is often stored in a single location, which makes it vulnerable to data breaches and unauthorized access. In contrast, a decentralized platform allows data to be stored in multiple locations, making it more difficult for hackers to access or tamper with.

Decentralized platforms can also make it easier for healthcare providers to share and access patient information, as they can do so without having to go through a central authority. This can improve the efficiency and accuracy of medical care, as doctors and other healthcare providers can quickly and easily access a patient's complete medical history.

Web3 technologies, such as blockchain and decentralized protocols, provide a decentralized infrastructure for the internet that allows for more secure and transparent interactions. They enable users to own and control their own data, rather than relying on centralized entities like companies or governments to store and manage it for them. This decentralized structure is designed to be more resistant to censorship and tampering, and can provide a more secure and private online experience for users.

Tuesday, December 13, 2022

Building Cloud Native Application


Image by Gerd Altmann from Pixabay

The Cloud Native term is getting increasingly popular for modern applications which make best use of the cloud, containers and orchestration. There are many more open-source software available for each area like ‘build’, ‘deploy’, ‘monitoring’ etc. You can run an existing application on cloud, but that does not make it cloud native. Cloud native applications are independent services, packaged as self-contained, lightweight containers that are portable and can be scaled quickly based on the demand.

Cloud Native Computing Foundation (CNCF) plays a vital role in fostering open-source technologies to support adoption of cloud native applications and also defining the standards. The CNCF lists immutable infrastructure, microservices, declarative APIs, service meshes, and containers as the technological blocks of cloud-native architecture.

Her are a few characteristics of cloud native applications


Application needs to use some common standards, interfaces, and formats in order to get it deployed without human intervention. Additionally, developers can use blue-green deployment strategy to make improvements to the application without any disruption to the user experience. Cloud native application are designed to deliver using continuous integration and continuous delivery (CI/CD) pipelines, which is the most important aspect for automating the building, testing, and deployment.

Independent and flexible

The application should be decoupled from the infrastructure resources so that it can be moved across Nodes. By containerizing the microservices, cloud-native applications run independently of the underlying operating system and hardware. Containerized micro services can be moved across nodes and even one cluster to another. This helps in deploying cloud-native applications on premises, on cloud infrastructure, or on hybrid clouds seamlessly.

Resilient and Scalable

Traditional applications usually have a single point of failure, application stops working if the main process crashes or due to any underlying network/ hardware issues. Auto recovery is not built in the traditional applications, human intervention is required to revive the application health. A well-designed cloud native application is able to survive and is serviceable even in the event of an infrastructure outage. Cloud native application can be made highly available as they are distributed by design.


A container orchestrator such as Kubernetes can make optimal usage of the available resources. It can scale up or down on-demand based on application traffic. It can also run multiple copies across multiple availability zones to achieve high availability. 


Cloud native is an approach to building and running applications that takes advantage of the distributed and decentralized nature of the cloud. Instead of deploying your code as a monolithic application, cloud native application is based on distributed microservices architecture.


Distributed applications are usually difficult to debug and trace. To gauge the health of the application, it’s important to monitor the logs and metrics generated by the application, and underlying infrastructure. Cloud Native applications should stream the logs to a centralized storage. Monitoring tools can be run on the centralized logs to generate alerts real-time.