The 'Only Use' Hook: Your New Secret Weapon for Conditional React Logic!

Shahzaib — Fri, 03 Nov 2023 10:18:46 +0000

You might be familiar with React Context as a global state & an alternative to passing props commonly known as prop drilling. Also you know there's a rule for hooks in React that every hook starts with the word use like useEffect, useState. Even every custom hook must start with use.

A new hook is available on React canary branch which is only named use. And the most exciting thing about this hook is it can be used conditionally.

use is a React Hook that lets you read the value of a resource like a Promise or context.

There are a couple of use-cases where use hook will come handy:

Accessing a Context even conditionally
A cleaner way to data fetching in components

In this post let's have a look at how we can make use for this new hook to access a context conditionally.

Suppose you've a theme context and one of your component is returning either JSX or nothing on a condition. So, in a case where we're returning nothing from that component, accessing the context will be unnecessary. Due to the constrain that hooks can't be used within a condition, we can't do anything but to access the context first either if we use anything from it or not.

Have a look at the Button component here which is returning something based on a prop & you can notice that we're accessing the ThemeContext at top:

Let's a have look how this new use hook can help with this situation.
use hook allows to access context based on a condition, so we can make use of it to access the ThemeContext conditionally only when we need it.

Have a look at the Button component here to see how use hook is being used conditionally:

🌟 Why `env` Wins: Advantages over Objects in Web Development 🚀

Shahzaib — Wed, 24 May 2023 04:47:35 +0000

🌟 Have you ever wondered why to choose env over objects in web development frameworks like React, Angular, Vue, and more? 🤔

When developing web applications, you might have come across the decision of using env (environment variables) or objects for managing data. While objects can serve the purpose of data sharing, env offers distinct advantages that make it a compelling choice in various frameworks.

🔐 Enhanced Security with env:
One of the key benefits of env is its ability to store sensitive or configuration-specific information securely. Whether it's API keys, database credentials, or other secrets, env keeps this sensitive data out of the codebase, reducing the risk of exposure. By utilizing env, you can ensure that your sensitive values are well-protected, enhancing the overall security of your web application.

🔧 Configuration Flexibility with env:
env provides unparalleled configuration flexibility for different environments. You can easily customize the behavior of your application without modifying the source code by changing the values of environment variables. Whether you're deploying your application in development, staging, or production environments, env allows you to tailor the configuration to each specific environment, making your application highly adaptable.

🔄 Consistent Deployment with env:
By leveraging env, you can achieve consistent behavior across different deployment environments. Instead of hardcoding values directly into your code, you rely on environment variables that can be set differently depending on the environment. This approach simplifies the deployment process, ensuring that your application behaves consistently regardless of the deployment environment.

💡 Sharing the Codebase with env:
When sharing your codebase with others, including an example env file can greatly streamline the setup process. By adding the original env file to the .gitignore file and sharing an example file with the same structure, collaborators can simply add their specific env values to the file. This saves time and avoids potential configuration issues when setting up the project.

🚀 Deployment and Configuration Management:
Most deployment platforms support setting env variables through project deployment settings. This allows for easy modification of variable values without changing the codebase. You can simply adjust the values and redeploy the application, making configuration management more efficient and hassle-free.

In conclusion, env is a powerful tool for managing sensitive or configuration-specific data in web development frameworks. Whether you're working with React, Angular, Vue, or other similar frameworks, env provides enhanced security, configuration flexibility, consistent deployment, streamlined codebase sharing, and efficient deployment and configuration management. By carefully considering the nature and purpose of the data, you can make an informed decision between using env or objects in your web development projects.

DEV Community: Shahzaib

The 'Only Use' Hook: Your New Secret Weapon for Conditional React Logic!

🌟 Why `env` Wins: Advantages over Objects in Web Development 🚀

🌟 Have you ever wondered why to choose env over objects in web development frameworks like React, Angular, Vue, and more? 🤔