React With Hooks

What is React Js

• React Js is nothing but a UI library built by Facebook to improve the creation of interactive , stateful and reusable UI components.
• One of its unique features is that it helps us overcome the limitation of DOM manipulation of browser for an interactive UI by introducing a concept of virtual DOM that selectively renders subtree of nodes based upon state changes.

Main Features of React

1. Components can be easily reused.
2. Debugging is getting easy with specialized chrome extensions
3. SEO friendly
4. Easy to create UI test cases
5. Fast when it comes to displaying a big amount of components
6. React Js ’s Virtual DOM one of the most important feature

Let’s first talk about DOM

The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents: “The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

Basically, its an application programming interface (API) for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

~ As per w3schools

How does DOM manipulation work?

It allows a language (JavaScript) to manipulate, structure, and style your website. After the browser reads your HTML document, it creates a representational tree called the Document Object Model and defines how that tree can be accessed

~ As per freecodecamp.org

DOM stands for Document Object Model.

To be precise it is used for

• Visualization of a page or screen of an app
• For maintaining state

Now lets talk about virtual DOM

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM

~As per Reactjs.org

How Does Virtual DOM Work?

Like the actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions.

It updates only what is required to update rather than refreshing whole page or screen.

eg: If we want to update one entry then only that entry would get updated instead of loading whole page.(As per above pic)

React Component State

What is component:

A component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

A component consists of:

• props(properties) : Input injected to component so that it becomes dynamic
• state: For manipulating and updating component. Through states virtual DOM concept comes in play.

Why it has jsx extension:

“jsx” notation given to React for javascript and xml for UI development and UX development.

Two ways of developing React

1. Functional Method
2. Class Method

Functional (React + Hooks) is equivalent to Class (React + Redux)

What are Hooks

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. We can also create your own Hooks to reuse stateful behavior between different components.

3 States being used or Hooks

• Use Effect (The useEffect hook is the combination of componentDidMount, componentDidUpdate and componentWillUnmount class lifecycle methods.)
• Use State (Has replaced this.setState)
• Use Context (used to passing data to children elements without using redux)

Here are some examples using Hooks from it’s official doc:

Use State Hook

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

equivalent class example

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

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

The state starts as { count: 0 }, and we increment state.count when the user clicks a button by calling this.setState(). We’ll use snippets from this class throughout the page.

Use Effect Hook

The Effect Hook lets you perform side effects in function components:

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:  useEffect(() => {    // Update the document title using the browser API    document.title = `You clicked ${count} times`;  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Equivalent Class Example:

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

  componentDidMount() {    document.title = `You clicked ${this.state.count} times`;  } 
 componentDidUpdate() {    document.title = `You clicked ${this.state.count} times`;  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

In React class components, the render method itself shouldn’t cause side effects. It would be too early — we typically want to perform our effects after React has updated the DOM.

This is why in React classes, we put side effects into componentDidMount and componentDidUpdate.

Happy learning :)