DEV Community: Kunal Sharma

Enhancing Dynamic Nature of React Application with Event Handling

Kunal Sharma — Fri, 09 Jul 2021 12:41:09 +0000

Starting with event handling requires us to understand what events mean. So, to explain it I would take an example in which I am going to punch a guy which is an action. The guy who got the punch hit is basically JavaScript and now he can have a response to it which can be either to hit me back or run due to my fear. Therefore, the action to which JavaScript can respond is called an event and the response is controlled by the event handler.

Now, talking of general events in an application will be:
1) Clicking an element
2) Submitting a form
3) Scrolling page
4) Hovering an element

Contrasting between event handling in html and react:

In HTML:

<button onclick=”incrementCounter()”>Increment Counter</button>

In React:

//Used in a function component
<button onClick={incrementCounter}>Increment Counter</button>

//Used in a class component
<button onClick={this.incrementCounter}>Increment Counter</button>

So, it can be seen that react events are camelCase. With JSX you only pass the function instead of calling it. Use this keyword in a class component.

Let’s go through one more contrast.

In HTML:

<a href=”#” onclick=”console.log(‘Clicked’); return false”>Click</a>

In React:

function handleClick(e){
    e.preventDefault();
}
<a href=”#” onClick={handleClick}>Click</a>

So, basically you have to call prevent default explicitly in react rather than just returning false.

Another important point is that when you put the callback function to be called on the trigger of the event in order to use ‘this’ work on the callback function either you can have an arrow function or you can use binding this to the function in the constructor.

1) Using arrow function to make ‘this’ work in callback

import React, { Component } from 'react'**

class About extends Component{
    constructor(props){
        super(props);
        this.state = {
            name: "Kunal Sharma"
        }
    }

    handleClick = () => {
        console.log("Button has been clicked", this);
    }

    render(){
        return (
            <div>
                <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
    }
}

export default Student

2) Using binding to use ‘this’ work in callback

import React, { Component } from 'react'

class Student extends Component{
    constructor(props){
        super(props);
        this.state = {
            name: "Kunal Sharma"
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(){
        console.log("Button has been clicked", this);
    }

    render(){
        return (
            <div>
                <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
    }
}

export default Student

Passing Arguments to event handlers:

1) Arrow Function:

<button onClick={(e)=>this.handleClick(id,e)}>Delete</button>

Here e is react’s event object and id can be a state or props.

2) Bind Method:

<button onClick={this.handleClick.bind(this,id)}>Delete</button>

In both the cases e is passed as an argument to the event handler.
In the arrow function we have implemented it explicitly but with bind it is automatically done.

There are various methods to trigger an event just like onClick. https://reactjs.org/docs/events.html follow this link to have a glance at them and use them as per requirement following the above mentioned ways.

In order to give you much clarity on how I created an app called “Fastest Clicker First” which uses the onClick events and in the event handlers I performed operations like counting the number of times button is being clicked in 10 seconds span of time, changing the states using Boolean variables to mount/unmount and playing the game again by initializing the state to the defaults , resetting the click me button and countdown timer.

App Component:

import React, { Component } from "react";
import Counter from "./components/Counter";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      mount: false,
    };

    this.mountCounter = () => this.setState({ mount: true });
    this.unmountCounter = () => this.setState({ mount: false });
  }

  render() {
    return (
      <div className="app">
        <h1>Fastest Clicker First</h1>
        <div className="buttons">
          {!this.state.mount ? (
            <button className="button" onClick={this.mountCounter}>
              Play Now
            </button>
          ) : null}
          {this.state.mount ? (
            <button className="button" onClick={this.unmountCounter}>
              End Game
            </button>
          ) : null}
        </div>
        {this.state.mount ? <Counter /> : null}
      </div>
    );
  }
}

export default App;

Counter Component:

import React, { Component } from "react";
import "./Counter.css";

class Counter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0,
      timeLeft: 10,
      isActiveButton: true,
      isPlayAgainButtonActive: false,
    };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  disableClickButton = () => {
    this.setState({ isActiveButton: false });
  };

  componentDidMount = () => {
    this.setCountdownTimer();
    this.resetClickButton();
  };

  setCountdownTimer = () => {
    var timer = setInterval(() => {
      if (this.state.timeLeft > 0) {
        this.setState({ timeLeft: this.state.timeLeft - 1 });
      } else {
        this.setState({ isPlayAgainButtonActive: true });
        clearInterval(timer);
      }
    }, 1000);
  };

  resetClickButton = () => {
    setTimeout(this.disableClickButton, 10000);
  };

  refreshCounter = () => {
    this.setState({ count: 0 });
    this.setState({ timeLeft: 10 });
    this.setState({ isActiveButton: true });
    this.setCountdownTimer();
    this.resetClickButton();
  };

  render() {
    return (
      <div className="counter">
        <h2>Time left is {this.state.timeLeft}</h2>
        <h2>Total number of clicks are {this.state.count}</h2>
        <div className="btns">
          <button
            className="btn"
            onClick={this.incrementCount}
            disabled={!this.state.isActiveButton}
          >
            Click Me
          </button>
          {this.state.isPlayAgainButtonActive ? (
            <button className="button" onClick={this.refreshCounter}>
              Play Again
            </button>
          ) : null}
        </div>
      </div>
    );
  }
}

export default Counter;

Here, in the code you can see in the buttons I have used onClick and in the JSX I have added a callback function which basically will perform the desired response.

You can play this game on https://fastest-clicker-first-2pnc89cjb-kunalsharma1999.vercel.app/

Hope, this example creates a better level of understanding regarding triggering an event and then handling the responses.

That’s it for the post.

Having a good grip over the react code flow using Lifecycle Hooks/Methods

Kunal Sharma — Thu, 08 Jul 2021 09:05:50 +0000

React lets us define components as classes or as functions.
We know that component class can be defined by extending React.Component and the only required method in that sub class is render().

But components also have various lifecycle methods that you can override to run your code at a particular time in the process. These methods are categorized into four groups as follows:
1) Mounting
2) Updating
3) Error Boundaries
4) Unmounting

In order to understand these methods better we’ll implement a counter component and utilize all the lifecycle methods.
Initially, the counter component is having a constructor method which after being called will be followed by the render method.

import React, { Component } from 'react'

class Counter extends Component {
    constructor(props){
        console.log('constructors');
        super(props)

        this.state = {
            counter: 0
        }

        this.increment = () =>{
            this.setState({counter: this.state.counter+1});
        }

        this.decrement = () =>{
            this.setState({counter: this.state.counter-1});
        }
    }

    render() {
    console.log('render');
        return (
            <div>
                <button onClick={this.increment}>Increment</button>
                <button onClick={this.decrement}>Decrement</button>
                <div className="counter">
                Counter:{this.state.counter}
                </div>
            </div>
        )
    }
}

export default Counter

As long as you’ll be clicking the increment or decrement button, the same number of times render method will be called.
Now lets introduce a few life cycle methods.
First one is componentDidMount method and it is called right after the render method.

componentDidMount(){    
        console.log("Components Did Mount");
    }

Note: This method is called after the render method but only when the component is constructed.

However, there is another method componentDidUpdate which takes few parameters i.e. previous props, previous state and snapshot.

componentDidUpdate(preProps, prevState, snapshot){    
        console.log("Components Did Update");
    }

On constructing the component, componentDidUpdate will not be called. Once you click increment or a decrement button this method will be called after the render method as many times you click.

Now, lets add the ability to mount and unmount this counter. We need to do that in App.js

constructor(props){
        super(props)

        this.state = {
            mount: true
        }

        this.mountCounter = () => this.setState({mount: true});
        this.unmountCounter = () => this.setState({mount: false});
    }

    render() {
        return (
            <div>
            <button onClick={this.mountCounter} disabled={this.state.mount}>Mount Counter</button>
            <button onClick={this.unmountCounter} disabled={this.state.mount}>Unmount Counter</button>
            {this.state.mount ? <Counter/> : null}
            </div>
        )
    }

Let’s add another life cycle method componentWillUnmount. Add this method in the counter component.

 componentWillUnmount(){    
        console.log("Components Will Unmount");
    }

As soon as the component is kicked out this method will be called and you can achieve this by clicking the unmount counter button.
But when you click mount counter button the constructor is triggered again along with the render and componentDidMount method respectively.

These are the most frequently used life cycle methods.

Other methods are:

shouldComponentUpdate with two parameters next props and next state and generally returns true by default.

shouldComponentUpdate(nextProps, nextState){
        return true;
    }

This method helps react know if render should be triggered or not. Use case for it might be that your state or props are updated and you don’t need render to be triggered because you are not changing anything in the UI and your method is too expensive to be computed.

Modify the following in the App.js

this.state = {
            mount: true,
            ignoreProp: 0
        }

Add a method in the constructor.

this.ignoreProp = () => this.setState({ignoreProp: Math.random()});

Pass this prop in the counter component and add a button to trigger.

<button onClick={this.ignoreProp}>Ignore Prop</button>
            {this.state.mount ? <Counter ignoreProp={this.state.ignoreProp}/> : null}

If we click on ignore prop button its going to call render and component did update method because something changed on the parent and is passed down to the component.

    shouldComponentUpdate(nextProps, nextState){
        if(nextProps.ignoreProp && this.props.ignoreProp !== nextProps.ignoreProp)
        {
            console.log('Should Component Update - DO NOT RENDER')
            return false;
        }
        console.log('Should Component Update - RENDER')
        return true;
    }

Now, adding this if statement to check whether the current ignore prop value is different from the next prop value and returning false thereby not allowing react to call render method because there is no change in the UI.

The next method is a static method and is called before every other method. getDerivedStateFromProps with two parameters props and state. The purpose of this method is to give you a chance to copy any values from props that you may be interested in transferring over to state.

To illustrate, add a random value in the state of App.js

 this.state = {
            mount: true,
            ignoreProp: 0,
            seed: 40
        }

Add a method seed generator.

this.seedGenerator = () => this.setState({seed: Number.parseInt(Math.random*100)});

Pass the seed as a prop to the counter component and also a button to trigger.

<button onClick={this.seed}>Seed Generator</button>
            {this.state.mount ? <Counter ignoreProp={this.state.ignoreProp} seed={this.state.seed}/> : null}

Anything you assign to this getDerivedStateFromProps gets assigned to state.

    static getDerivedStateFromProps(props, state){
        return null;
    }

So, if you don’t want to change state you simply return null.
Also, in the counter component’s state add seed value as 0 for default.

  this.state = {
            counter: 0,
            seed: 0
        }

Now, to check its functioning we add a if statement to check if seed exists on the props and the seed that is in our state is not equal to that seed that’s passed then we’ll return seed value that’s props.seed and set the counter to props.seed as well.

    static getDerivedStateFromProps(props, state){
        if(props.seed && state.seed !== props.seed){
            return {
                seed: props.seed,
                counter: props.seed
            }
        }
        return null;
    }

Now, the counter will start at 40 as seed value in App.js is initialized as 40. Clicking Seed Generator button will change the value of the counter.

So, basically it copies props into state.

Note: Since it is a static method, we don’t have access to instance of the object.

Next method is getSnapShotBeforeUpdate which is called just before render and takes previous props and previous state as arguments and returns a value. This method allows us to capture some properties that are not stored in the state before we re-render that component. Whatever is returned here is passed to componentDidUpdate as a third parameter called snapshot.

 getSnapshotBeforeUpdate(prevProps, prevState)
    {
        console.log('Get Snapshot Before Update');
        return null;
    }

Finally, there is a method called componentDidCatch which is part of the error boundaries and takes two parameters error and info and gives a chance to gracefully handle errors that we run into.

    componentDidCatch(error, info){
        console.log('Component Did Catch');

        this.setState({error, info});
    }

Now, lets create a component which produces a error to check its functionality.
We’ll create a ErrorComponent and return a div with some non-existent value.

const ErrorComponent = () => <div>{props.ignore}</div>

Put that component to be rendered in the counter components render method.
When you’ll run this application, you’ll get an error and component did catch will be called. If you don’t use this method, you’ll lose everything which is rendered in the browser.
In the render method you can check for the error and get it displayed.

  render() {
        console.log('render');

        if(this.state.error)
        {
            return <div>We have encountered an error! {this.state.error.message}</div>
        }

        return (
            <div>
            <button onClick={this.increment}>Increment</button>
            <button onClick={this.decrement}>Decrement</button>
            <div className="counter">
                Counter:{this.state.counter}
            </div>
            <ErrorComponent/>
            </div>
        )
    }

Now, comes a doubt that we can use these lifecycle hooks in a class component but how can we use it in a functional component. For that we can use useEffect hook which came in React 16.8. It will help us to detect the state changes and props changes also. It will perform all the functionalities of componentDidMount, componentWillUnmount and componentDidUpdate.

First of all you’ll have to import useEffect and useState from react.

import React, { useEffect, useState } from 'react'

Use the useState method for the counter functionality in the component.

 const [count, setCount]=useState(0);

Add a button to increase the count using setCount function.

  <button onClick={() => {setCount(count+1)}}>Click to increment count {count}</button>

In order to detect the state changes we use the useEffect method.

   useEffect(()=>{
        console.log(count);
    })

So, as soon as the state will change this useEffect method will be triggered and you can perform any operation as per your wish.
But if you want it to be triggered at a specific change of state you can do the following:

useEffect(()=>{
        console.log(count);
    },[count===3])

This will trigger only when count is 3.
Similarly, you can also pass the count as a prop from the parent to the child component and use the useEffect method in the child class to detect the changes and perform some operation.

If you want to use this useEffect hook in such a way that you don’t want to execute componentDidMount and componentDidUpdate at the same time the following is the procedure to do so.
Initialize a reference hook which returns mutable object whose current property is initialized with false.

const didMountRef = useRef(false)

Now, modify the useEffect method as shown below.

useEffect(() => {
    if (didMountRef.current) {
      doStuff()
    } else didMountRef.current = true
  }

Implementing this will ensure that initially didMountRef.current is false and for the first call it acts as componentDidMount but after the mounting didMountRef.current will become true and for the next times it will work as componentDidUpdate.
Also, you can perform a clean up in the useEffect hook which basically ensures that after each update previous events listened or subscriptions are deleted to maintain better performance and avoid app from crashing.

  useEffect(() => {
      effect
      return () => {
          cleanup
      }
  }, [input])

Conclusion:

useEffect() runs after every render. So, it’s like componentDidMount(), componentDidUpdate() and componentWillUnmount() all at the same time. So, still you can find use cases for class components because of access to specific lifecycle methods though react hooks introduced in React 16.8 resolve many issues like managing of state and optimization.

That's it for the post.

Understanding State in React

Kunal Sharma — Wed, 07 Jul 2021 09:38:29 +0000

When we start building a react application, we break our application into multiple components. So, there is an App Component which is the main component and we then add the remaining components inside to build our application.

So, before we go to state let us learn about props.

Props is basically a way to pass data between components.

Suppose, we define a const name in App Component like as follows:

const name = “Kunal Sharma”

Now how to pass this data to the child components?
The answer to this is, we can do it by using props.

For eg. if I want that name in my header component I can just write:

<Header name={name}>

Now, if I am using function based header component what I can do is just write props in the parenthesis.

const Header = (props) => (
return <h3>{props.name}</h3>
);

By this way I can pass as much information as I want.

Note: We can only pass props in one direction i.e. from parent to child.

Now let’s come to state.

State is a JavaScript object that contains a piece of data. You can imagine it as a variable in react app. The difference is though that this state or variable reacts to changes. So, if something happens in our app. If that piece of variable or state gets updated, the component is automatically going to re-render and your component is going to react to that change.

For eg. If we take a counter variable initialized as 0. Also, we have an increment function to add 1 to the counter variable. Now, lets create a button to increment the counter and what we see in the view is variables in react don’t react to changes. But if we console log the steps you are going to see the value of counter is getting incremented.

However, if we use state react automatically is going to know what parts of the UI to re-render and this makes react super powerful and fast.

Now when we talk about state usage in previous versions of react, we could create a state only in a class component. So, state was private and fully controlled by the component. The most important benefit of state became its ability to be modified or get updated.

There are two ways to initialize the state in a react component:
1) Directly inside class (without constructor)
Directly inside class:

Class Student extends Component{
//States – Here it is a class property
state = {
name : “Kunal Sharma”,
rollNo: this.props.rollNo
}
render(){
return(
<h1>Hello {this.state.name} your roll number is {this.state.rollNo}</h1>
)
}
}

2) Inside the constructor (with constructor)
Inside the constructor:

Class Student extends Component{
constructor(props){
//It is required to call the parent class constructor
super(props);
//States
this.state = {
name : “Kunal Sharma”,
rollNo: this.props.rollNo
}
}
render(){
}
}

When the component class is created, we know that the constructor is the first method called, so it’s the right place to add state and also class instance has already been created in memory, so you can use this to set properties on it.
Note: When we write a constructor, make sure to call the parents class’ constructor by super(props) as when you call super with props React will make props available across the component through this.props.

Updating a State

setState() Method is used to update states.

this.state = {
name : “Kunal Sharma”
}
this.setState({
name: “Kunal”
});

Second form of setState() method:

this.setState(function(state,props){
return{
};
});

It accepts a function rather than an object.
It receives the previous state as the first argument and props at the time the update is applied as the second argument.

But now after the release of React Hooks in React 16.8 we can also use the capabilities of the state in a function based component as well.

So, to use state in function based components we import useState from the react library.
Suppose, continuing the counter example:

const [counter, setCounter] = useState(0)

-Here, 0 is the basically the initial data we want to use.
-counter is the actual piece of state.
-setCounter is the function that allows us to change the counter.

So, make sure that you don’t increment the counter as counter += 1 and use setCounter instead.

setCounter((prev) => prev + 1);
//or setCounter(counter + 1);

Now, it actually works.

Note: We can only pass state in one direction i.e. from parent to child and state is dependent on one component.

Conclusion

State in a react application is a object that contains information that may change in its lifetime and gets reflected in the view automatically.

That's it for this post.