DEV Community: Piyush Jaiswal

Intoduction to Redux

Piyush Jaiswal — Tue, 20 Jun 2023 14:27:43 +0000

Hey coders! I hope you are doing well and building projects. As promised in the previous article, this is part 1 of our comprehensive guide on React Redux.

In this article, we are going to understand What is redux? Why do we need redux? What are other available state management mechanisms? And what packages does the redux library have to offer?
So let’s dig into it ….

Why do we need to manage the state?

We know React offers certain hooks to locally manage the state in a component. For example, while creating forms we can manage the state of the form with the help of the useState() hook and accordingly perform functions.

But sometimes we need to render UI or perform some actions based on the state which is used or declared in some other component.

In other words, we need to manage a global state such that, every component has access to it and can use or update the state. And that updation of state by one component should immediately reflect in each and every component.

That’s where global state management comes into the picture. We’ll look into state management in detail in the next article.

State Management without Redux

1 useState()
Although this is the best way to manage the state locally. But if some other component tries to access this state, we are helpless.

import {useState} from 'react'

export default function counter(){

//local state management
const [data, setData] = useState("")

return(
<div>
<input type="text" value={data} onChange={(e)=>setData(e.target.value)} />
</div>
)
}

2 ContextAPI
ContextAPI is not a state management library, instead, it
is a mechanism based upon props drilling You can refer to
this article to understand hooks, and here is
the implementation.

As you can see, it takes a certain line of code to prop drill. And it’s a good approach if we have to manage a bunch of components or our codebase is small.

Now, imagine if we have a very huge code base and 100s of components, then we have to repeat this process for every component of each component tree. And this is pretty much hectic and repeated logic which is not desirable

3 useReducer
You can see the useReducer implementation over here. UseReducer hook came into existence after a few years of the introduction of the redux library.

useReducer is inspired by redux and works on the same pattern as redux but the problem remains untouched. useReducer() is more suitable for smaller-scale applications or local component state management. It follows the same pattern as Redux but on a smaller scale.

What is Redux? And how it manages the state?

As per official Redux documentation,

Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for the state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

Redux implements state management with the help of One Way Data Flow and Flux Pattern which we will cover in the next article i.e. Part 2 of this series.

What Redux library offers?

Redux in itself offers multiple packages. These are:

react-redux package to build react apps. It offers some hooks to read and update the state which we will see in upcoming articles.
redux core package. This package consists of all the libraries, features, etc. It is used to write redux logic from scratch.
redux toolkit. It is the most recommended way to implement redux logic. write redux logic from scratch consists of repeated boilerplate code. Hence to manage the state more efficiently redux toolkit is recommended.

But in order to build our understanding regarding redux, we must learn to write redux logic from scratch and then we can easily move on to redux toolkit

When and When Not to Use Redux?

So basically we have 3 options available for managing the state:

1 Context API
Use Context API when you have a small to medium-sized application with a few levels of nesting, and you need to share the state between components that are not directly connected in the component tree.

It's useful for managing global or application-level states, such as user authentication, theme preferences, or language settings.

Context API is built into React and doesn't require any additional libraries, making it lightweight and easy to use.

However, it might not be the best choice for complex state management scenarios or applications with a large number of components, as it can lead to prop drilling and performance issues.

2 useReducer
Use the useReducer hook when you have a local state that requires more complex state transitions, such as managing the state of a form, implementing undo/redo functionality, or handling a component with multiple states and actions.

It provides a way to handle state updates through a reducer function, similar to how Redux works but on a smaller scale.
useReducer is part of React's core library and can be used without any additional dependencies.

While it is more powerful than a simple component-level state, it may become harder to manage for larger applications with more complex state interactions.

3 Redux
Use Redux when you have a large application with complex state management needs, including advanced features like time travel debugging, middleware, and a centralized store.
It's suitable for applications with many interconnected components and where the managing state becomes challenging using the Context API or useReducer alone.

Tu sum up, For small to medium-sized projects, Context API and useReducer might be sufficient. For larger and more complex applications, Redux could provide the necessary tools and scalability.

This sums up our first article of the series Mastering Redux. I hope you enjoyed learning about what is redux, why it exists, how it works, and when to use it.

In the next article, we will learn about State Management in detail and see why immutability is an important concept in the working of redux.

If you like my work, please follow me to never miss out on any of my well-crafted articles.
You can also follow me on GitHub and LinkedIn. I will meet you in the next one.

React Hooks Simplified

Piyush Jaiswal — Fri, 09 Jun 2023 12:32:45 +0000

If you have ever tried learning React, your brain might get stuck on React Hooks. But not anymore, I have explained important built-in react hooks in a very simplified manner with easy implementation. So let's dive deep into it…

In very simplified terms, Hooks are reusable logic or javascript functions similar to the reusable components we build in React.

Hooks are identified by their name which starts with “use”. For example, useState(use logic to maintain state), useEffect(use logic to perform some actions as an effect when something(s) changes), etc.

useState

In simple terms, useState is used to define variables whose values can be changed dynamically, and at the same time, those changes get reflected in your UI components.

Normal variables do change dynamically but their state doesn’t get updated in your UI because UI is not automatically aware of the fact that the state is changed.

Therefore, libraries such as react follow a unidirectional data flow, where changes to the data trigger updates to the UI. This means that you need to explicitly update the UI to reflect the changes in the variables.
Example: Simple Up and Down Counter
Explanation:
Whenever you click on the + or - button, you are trying to update the state of the variable dynamically with the help of the update function provided by useState hook. So whenever the state changes, the hook explicitly forces the updation of the component by re-rendering.

function UseStateHook() {
    const [data, setData] = useState({
        count: 0,
        id: 'X'
    });

    const updateCount = (operator) => {
        operator === '+'
            ?
            setData((prev) => {
                return {
                    ...prev,
                    count: prev.count + 1
                }
            })
            :
            setData((prev) => {
                return {
                    ...prev,
                    count: prev.count - 1
                }
            });

    }

    return (
        <div className="App">
            <h2>Use State Hook</h2>
            <br />
            <button onClick={() => { updateCount('-') }}>-</button>
            <span>{data.count}</span>
            <button onClick={() => { updateCount('+') }}>+</button>
        </div>
    );
}

useEffect

Many times you want to perform some action, when some state or variable changes.
This can be achieved by useEffect
It triggers a function, whenever the state of dependencies passed by you changes.
3 cases:

To run the function on every render

```
useEffect(()=>{
//perform some action on every render
});
```

To run the function only once

useEffect(()=>{
//perform some action only once
}, []);
//empty dependency array

To run the function only when the passed dependencies gets changed.

useEffect(()=>{
//perform some action only when dependency variables change
}, [dependencyVarOne, dependencyVarTwo]);
//non-empty dependency array

Cleanup function: useEffect is generally used for side effect functions like subscriptions, data fetching, etc. So when the component gets unmounted it’s required to release or clean up the resources

useEffect(()=>{
//side effect logic

return ()=>{
//cleanup logic
}
}, [/* dependencies */ ] );

Example: When we change width of browser, as an effect the current width of browser gets displayed

import { useState, useEffect } from 'react'

function UseEffectHook() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        window.addEventListener('resize', () => {
            setWidth(window.innerWidth);
        })

        //cleanup
        return () => {
            window.removeEventListener('resize', () => {
                setWidth(0);
            });
        }
    }, [])

    return (
        <>
            <h2>useEffect Hook</h2>
            <br />
            <p>
                Window Width:
                <span>
                    {width}
                </span>
            </p>
        </>
    );
}

useMemo

It is used to improve the performance of your React app.

Sometimes, you have to perform functions such as sorting data, fetching a large amount of data, or some other kind of expensive functions
In that case, you don’t want your app to perform that function again and again until it is really required to recalculate as it makes your app slow

Here, useMemo hooks come into the picture, it caches the result of that expensive function and calls the function again only when dependencies change. Otherwise, it returns the previous cached result.
Example: In the following example, on initial render, both memoized and un-memoized function gets called.
But when we click on the update button it should only count up the value by one but it is also calling unmemoized function as seen on the console
But memoized function gets called only when the input location or vacancy gets updated

const hotelData = useMemo(() => {
        console.log("Memoized Function Call");
        //calling an API to get data
        return `Hotel Data ${userInput.location}  and ${userInput.vaccancy}`;
    }, [userInput.location, userInput.vaccancy])

Complete code for this example can be found here

useCallback

It is also a performance improvement hook
It caches the entire function between re-renders but, it doesn’t call the function it only returns it.
In some cases, your function call might get changed based on some variables otherwise function remains the same
So for that purpose, useCallback can be used
Example: in this example, we have used useEffect() hook to compare whether our function gets changed. As you click on the update button, the state changes and component gets re-render but the function inside useCallback does not change
However, if you change the dependency variable, the function inside the callback gets changed

let func = useCallback((orderdetails) => {
        //api call to post data or any other function for ${value}
        console.log(`Order Placed ${value}`);
        return value;
    }, [value])

Complete code for this example can be found here

useRef

Suppose you want to keep a value or function for future reference and that value or function doesn’t affect the rendering of your component, then useRef() can be used to reference that value or function between re-renders.

And later or you can use that, maybe for comparing, etc
For example, we can make use of useRef() to compare functions as we have done in the example of callback

Example:, as you update the state using the update button nothing happens, but when you change the input value
Two values get logged
One is the previous value of a function and its result
And then you get a new function and its result

const initialFunc = useRef(func);

    useEffect(() => {
        if (initialFunc.current !== func) {
            console.log("Function gets changed");
            initialFunc.current();
            func();
        }
    },[func])

Complete code for this example can be found here

forwardRef

Sometimes you may want that your parent component can modify DOM or perform some action in the child component to which the parent doesn’t have direct access.
In that case, you can make use of the useRef() hook to hold that state and forwardRef() to expose that part to your parent
Example manipulating a child component from the parent component
In this example, we are changing the type of input of an input tag from the parent element
Initially, when you type in the input tag it takes normal text input but when you click on the button it converts to password type

import { useRef, forwardRef } from 'react';

// This example is referred from Official React Docs
// Create child component here or import it
const Child = forwardRef((props, ref) => {
    return <input placeholder={props.placeholder} ref={ref} />;
});

function ForwardRef() {
    const mainRef = useRef(null);

    function handleManipulation() {
        mainRef.current.setAttribute('type', 'password');
    }

    return (
        <div>
            <h2>Forward Ref: Manipulating Child Component From Parent</h2>
            <br />
            <Child placeholder="Enter Any Value..." ref={mainRef} />
            <br />
            {/* BUTTON OF PARENT TO MANIPULATE CHILD */}
            <button onClick={handleManipulation}>Convert Input type to Password</button>
        </div>
    );
}

export default ForwardRef;

useReducer

This hook is used for state management. It allows you to define the initial state, define a function that will take the current state, and action performed as an argument, and contains the logic to update the state. It also has a dispatch function to help you update your state.

DISPATCH FUNCTION It is used to update the state to a different value and triggers the re-render and specify the action that occurred. Dispatch function updates the state only for the next render, and you’ll get the old value before the re-render completes.

REDUCER FUNCTION This function takes state and action as an argument. And the logic to update the state based upon action is present inside it. Action argument contains the action performed as defined by the dispatch function and state contains the current state.

Example: Let’s say a user logged in to our web app. He is not a subscriber hence the initial state is user type general but when he successfully subscribes, the state gets updated to the subscribed user, and accordingly UI changes.

import { useReducer } from "react";

function reducer(state, action) {
    if (action.type === "Subscribed") {
        return {usertype: "subscribed"}
    }
    else if (action.type === "Unsubscribed") {
        return {usertype: "unsubscribed"}
    }
    else if (action.type === "New") {
        return {usertype: "general"}
    }
    throw Error('Unknown Action');
}

function UseReducerHook() {
    const [state, dispatch] = useReducer(reducer, { usertype: "general" });

    function handleClick(e) {
        switch (e.target.id) {
            case "Subscribe":
                dispatch({type: "Subscribed"})
                break;
            case "Unsubscribe":
                dispatch({type: "Unsubscribed"})
                break;
            default:
                dispatch({type: "New"})
                break;
        }
    }
return(
<div>
//code
</div>
);

Complete code can be found here

Context API

It is another way of state management. It can be better understood by following explanation.

Example: It’s implementation can be understood by creating a dark and light mode functionality

import { createContext, useState} from "react";
import Heading from "../component/heading";

const Theme = createContext(null);

function ContextAPI() {
    const [state, setState] = useState({
        theme: "light",
        text: "Welcome to light"
    })

    function handleTheme(e) {
        e.target.id === "Light"
            ?
            setState({
                "theme": "light",
                "text": "Welcome to light"
            })
            :
            setState({
                "theme": "dark",
                "text": "Welcome to darkness"
            })

    }

    return (
        <Theme.Provider value={{
            theme: state.theme,
            text: state.text
        }} >
            <div className={state.theme === 'dark' ? "dark" : "light"}>
            <Heading />
            <button id="Light" onClick={handleTheme}>Light Mode</button>
            <button id="Dark" onClick={handleTheme}>Dark Mode</button>
            </div>
        </Theme.Provider>
    );
}

export {ContextAPI, Theme};

Code of child component Heading is :

import { useContext } from "react";
import { Theme } from "../hooks/ContextAPI";

function Heading() {
    const contentTheme = useContext(Theme);
    return <h1 className={contentTheme.theme === "dark" ? "dark" : "light"}>{contentTheme.text}</h1>
}

export default Heading;

So that's all from my side. I hope this article helped you to clear your understanding a bit. You can found the entire code over here
I'll try to come up with more articles with improved explanation and examples.

Various Environments in Software Development

Piyush Jaiswal — Sat, 25 Feb 2023 07:58:51 +0000

The journey of a software, starts from the core idea and goes on to the deployment of the final product.

As our app, website, web app, or any tech product starts receiving huge traffic, it becomes important to provide the reliable services.
Any error or bug in the code will lead to servers crashing down, which may eventually lead to huge losses in terms of both finances and number of users.
Thus, the deployment of a new code, or changes in existing code base must go through a set of procedures to ensure smooth and bug free experience. Therefore, we need different environments, and each has its own role to play.

There are basically 4 environments or stages:

Development Environment
Testing Environment
Staging Environment
Production Environment

Development Environment

If you have ever written code, then there is a high chance that you were working in Development environment.
In this environment, it's basically about writing code to build your websites, apps, web-apps, extensions, and everything else.

Testing Environment

Now once you are done building your product, as a developer, you start writing testing scripts.
In Test Scripts you write test cases, to test and to find bug in your own code so that you can correct them.
Developers usually do minimal testing in this stage.

Staging Environment

Once developers are done with developing and testing at their level, codebase is sent for testing in Staging Environment.
At this stage, rigorous testing is done.
There are basically two types of tetsing:

Automatic Testing
Manual Testing

For example your code is staged for first time, then you'll be having Stage 1 -> Version 1.0
Now tester will come up with some improvements. Developer will implement those improvements and thus now you are in Stage 2 and product is in Version 2.0

This stage continues in loop until a satisfactory Version is developed.

Production Environment

Anything Which goes into production, has to be defect free.
This is the simple rule that must be followed.

Once previous stages are complete, code is deployed and is available for customers to use.

So this is a small and crisp information on different environments. Hope you found it useful and interesting. If you do, please follow for more upcoming articles.