Forem: punya2004

Migrating From Class To Functional Components With Hooks

punya2004 — Tue, 18 May 2021 12:39:36 +0000

What’s the difference,which should you use in your app,and why?

Since React is so popular among developers today, this blog is
intended to give you the pros and cons of React hooks vs. classes
through React useState() and useEffect()’s hooks API.

Rendering JSX:

First of all, the clear difference is the syntax. Just like in
their names, a functional component is just a plain JavaScript function that returns JSX. A class component is a JavaScript class that extends React.Component which has a render method.

Let’s take a look into a simple example.

In functional components:

import React from "react";

const FunctionalComponent = () => 
{
    return <h1>Hello, world</h1>;
};

In class components:

import React, { Component } from "react";

class ClassComponent extends Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

Passing props:

Inside a functional component, we are passing props as an argument of the function. Note that we are using destructuring here.

In functional components:

<Component name="punya" />

const FunctionalComponent = ({ name }) => {
 return <h1>Hello, {name}</h1>;
};

we can write it without destructuring .

const FunctionalComponent = (props) => {
 return <h1>Hello, {props.name}</h1>;
};

In class components:

Since it is a class, you need to use this to refer to props.

class ClassComponent extends React.Component {
  render() {
    const { name } = this.props;
    return <h1>Hello, { name }</h1>;
 }
}

Handling state:

Handling state was only doable in a class component until
recently, React Hook useState was introduced to allow developers to write stateful functional components.

Handling state in functional components:

const FunctionalComponent = () => {
 const [count, setCount] = React.useState(0);

 return (
   <div>
     <p>count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Click</button>
   </div>
 );
};

To use state variables in a functional component, we need to use
useState Hook, which takes an argument of initial state and
returns the current state and a function that updates it.

Handling state in class components:


class ClassComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <div>
       <p>count: {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click
       </button>
     </div>
   );
 }
}

The idea is still the same but a class component handles state a
bit differently. Basically, without implementing the constructor and calling super(props), all the state variables that you are
trying to use will be undefined. So let’s define the constructor first.
Inside the constructor, you will make a state object with a state
key and initial value. And inside JSX, we use this.state.count to access the value of the state .

Lifecycle Methods:

As you already know, lifecycles play an important role in the
timing of rendering.

In class components:

On Mounting (componentDidMount):

class ClassComponent extends React.Component {
 componentDidMount() {
   console.log("Hello");
 }

 render() {
   return <h1>Hello, World</h1>;
 }
}

On Unmounting (componentWillUnmount):

class ClassComponent extends React.Component {
 componentWillUnmount() {
   console.log("Bye");
 }

 render() {
   return <h1>Bye, World</h1>;
 }
}

In functional components:

const FunctionalComponent = () => {
 React.useEffect(() => {
   console.log("Hello");//componentDidMount()
      return () => {//componentWillUnmount()
     console.log("Bye");
   };
 }, []);
 return <h1>Hello, World</h1>;
};

Replacing componentDidMount, We use the useEffect hook with the second argument of []. The second argument of the useState hook is normally an array of a state(s) that changes, and useEffect will be only called on these selected changes. But when it’s an empty array like this example, it will be called once on mounting. This is a perfect replacement for a componentDidMount. componentDidMount is a lifecycle method that is called once after the first render.

unmounting inside the useEffect function. This is especially
useful when you have to clean up the subscriptions such as a
clearInterval function, otherwise it can cause a severe memory
leak on a bigger project. One advantage of using useEffect is
that we can write functions for both mounting and unmounting in
the same place.

Conclusion:

I would like to conclude that functional components are taking
over modern React in the foreseeable future. As we noticed in the examples, a functional component is written shorter and simpler, which makes it easier to develop, understand, and test. Class
components can also be confusing with so many uses of this. Using functional components can easily avoid this kind of mess and keep everything clean.

Learn How TO Utilize Closures In JavaScript

punya2004 — Mon, 17 May 2021 13:19:59 +0000

Closures are a very powerful mechanism in the JavaScript
programming language. In this, we will learn about closures and the benefits of using them in your JavaScript code.

What is Closure?

A closure is a function along with its lexical environment bundled together. That means the function has access to its outer
function scope even after the outer function has returned.

A closure can remember and access variables and arguments of its
outer function even after the function has finished.

Let's see what is a Lexical Scope?

A lexical scope or static scope in JavaScript refers to the accessibility of the variables, functions, and objects based on their physical location in the source code.

For example:

   function display() {
        var name = 'punya'; 
        function displayName() { 
            console.log(name); 
        }
        displayName();
    }
    display();

Output:

display() creates a local variable called name and a function called displayName(). The displayName() function is an inner function that is defined inside display() and is available only within the body of the display() function.

Note that the displayName() function has no local variables of its own. However, since inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, display().

Let’s look at some practical examples of closures :

Example 1:

function Counter() {
            var counter = 0;

            function IncreaseCounter() {
                return counter += 1;
            };

            return IncreaseCounter;
        }

        var counter = Counter();
        console.log("Value of Counter is:",counter()); 
        console.log("Value of Counter is:",counter());
        console.log("Value of Counter is:",counter()); 
        console.log("Value of Counter is:",counter());

Output:

In the above example, outer function Counter returns the reference of inner function IncreaseCounter(). IncreaseCounter increases the outer variable counter to one. So calling inner function multiple time will increase the counter to one each time. So the behaviour of closure is that the inner function is returned from the outer function before being
executed.

####Example 2:

   function Counter() {

        var counter = 0;

        setTimeout(function () {
            var innerCounter = 0;
            counter += 1;
            console.log("counter value is = " + counter);

            setTimeout(function () {
                counter += 1;
                innerCounter += 1;
                console.log("counter value is = " + counter + ", innerCounter value is = " + innerCounter)
            }, 500);

        }, 1000);
    };

    Counter();

Output:

As per the closure definition, when counter() called it will first execute the 1st setTimeout() after 500ms and 2nd
setTimeout() is called after 1000ms.

Advantages of using closures:

It can useful for Data Encapsulation which means it is useful in
hiding implementation detail in JavaScript.

Example :

var counter = (function () {
        var privateCounter = 0;
        function changeBy(val) {
            privateCounter += val;
        }
        return {
            increment: function () {
                changeBy(1);
            },
            decrement: function () {
                changeBy(-1);
            },
            value: function () {
                return privateCounter;
            }
        };
    })();

    console.log("Counter value is: ",counter.value()); 
    counter.increment();
    counter.increment();
    console.log("Counter value is: ",counter.value()); 
    counter.decrement();
    console.log("Counter value is: ",counter.value());

Output:

Disadvantages of closures:

1: Till the time its active, the memory can’t be garbage collected.

2: It slows down the performance, because function within other
function creates duplicate in memory.

Getting Started With React Context API - A Deep Dive

punya2004 — Sun, 16 May 2021 14:37:20 +0000

So it’s my first blog and had a thought about posting something that could be helpful for React-developers beginners like ME. So I’ve been working in react for last 3–4 months and one rookie problem that most of us face while building your own first big project.

What is Context API?

Context API is a way to enable components to share some data without explicitly passing via each component manually. Context is like a global object to the React component sub-tree.

Why we need Context API ?

Nearly every developer knows that React components are structured like a tree. There is one root node where all the components are connected. In this tree structure, the data flows in only one direction — from top to bottom.

The problem of prop drilling arises when you create a tree structure of several components and the state created in higher level component you try to use it in lower level components. In such case you need to pass that as prop through all component levels, which is not a good practice.

One line definition would be “API which is created in React itself and provides a way to pass props down the whole tree component at every level.”

There are different methods to use context in you React-app, Here is how I use it :

1.First I created A StateProvider.js file which integrated my app to context API

StateProvider.js

import React, { createContext, useContext, useReducer } from "react";

export const stateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => (

    <stateContext.Provider value={useReducer( reducer, initialState )}>
        {children}
    </stateContext.Provider>
)

export const useStateValue = () => useContext(stateContext);

2.Then I used The StateProvider in index.js allowing context to be used in App component.

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Reducer, { initialState } from './Reducer';
import { StateProvider } from './StateProvider';

ReactDOM.render(
  <React.StrictMode>
    <StateProvider initialState={initialState} reducer={Reducer}>
    <App />
    </StateProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Now in StateProvider.js I created context using createContext() method in react, And using it in useContext method you can can read the current value of states through the components. Then you create StateProvider function where you pass parameters like reducer , initialState and children props which will be root(App.js) component (because we need to use the state through out all the tree).

So now in index.js I wrapped the component with provider I just created as StateProvider passing it intialstate and reducer from reducer.js as created in the code below.

3.Then I created reducer.js file where I defined intialState and reducer function.

reducer.js

export const initialState = {
    user: null,
}

function Reducer (state, action) {
    console.log(action)
    switch(action.type) {

        case 'SET_USER':
            return {
                ...state,
                user: action.user
            }
         default:
            return state;
        }
}

export default Reducer;

4.Then using useStateValue() i.e. useContext() I was able use my state anywhere I want,

App.js

import React, { useEffect } from 'react';
import Login from './Login';
import { auth } from './firebase/config';
import { useStateValue } from './StateProvider';

function App() {

  const [{ user }, dispatch] = useStateValue();

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((authuser) => {
      if(authuser){

        dispatch({
         type: 'SET_USER',
          user: authuser
        })
      } else{    
        dispatch({
          type: 'SET_USER',
          user: null
        })
      }
    })
    return () => {
      unsubscribe();
    }
  }, [])

  console.log("user is...", user)

Here the initialState is an object initializing all the variables that you want to use in tree and reducer function will take care of updating the DOM of that state.

Now in App.js using useStateValue variable created in StateProvider.js I accessed the current value of user. useStateValue i.e. useContext returns an array where first value is state i.e. user written as {state} and second is dispatch method which will dispatch the new value of state and type of action. Since it need to be performed only one time when page renders I use dispatch method in useEffect hook.

Here I set type as “SET_USER” and value of user as authuser that I got from firebase . So now it passes type as action.type and user as action.User which is updated in “SET_USER” case of switch in reducer function. I updated the user state using rest operator returning previous value and updating only user.