React.js Core Concepts

React.js and its pros & cons

React is a declarative, component-based JavaScript library for building user interfaces.
Pros:

• Use virtual DOM to effectively render user interfaces.
• Supports component-based design which is reusable and easy to manage.
• Single page application means rendering different components on the same page efficiently without any reload. Which makes a better user experience.
• The HTML-like syntax is easy to learn and use.

Cons:

• Continuously updated features which is a bit challenging for developers to cope up with new documentation.
• Still contains class-based components example in documentation instead of functional components.

JSX

JSX means JavaScript XML which allows HTML-like syntax with JavaScript in react. Using JSX we can create dynamic content in our react application easily. Without JSX the code is a bit lengthy and complex while using JSX the code is simple and easy to understand. Babel is used by React to convert the JSX to React elements.

import React from "react";
const Blogs = () => {
    return (
        <div>
            <img
                src="https://i.ibb.co/2SfqRWr/maxresdefault.jpg"
                alt=""
                width="100%"
            />
        </div>
    );
};

export default Blogs;

In the above code snippet inside the return statement it looks like html syntax actually it is JSX notation which makes us easier to understand what our code structure will looks like.

Virtual DOM

It is a virtual representation or copy of the real DOM object. Whenever anything changes in our document react will create a new virtual DOM and compare it with the previous DOM, find out the change between these two DOMs using diff algorithm and finally update the specific changes into the real DOM without updating the entire dom. This makes DOM-manipulation more effective without updating the entire DOM whenever a small part of the DOM is changed.

Props and State

Props are mainly used for passing dynamic data from parent component to child components while the state is a variable that is used to store information about a specific component and that can be changed dynamically. Props are read-only and immutable which means we can not change props. When the state changes re-render will happen dynamically.

import React from "react";
const Blogs = () => {
    const blogs = ["blog1","blog2","blog3","blog4","blog5",]
    return (
        blogs.map(blogTitle => <Blog title={blogTitle}></Blog>)
    );
};
export default Blogs;

import React from "react";
const Blog = (props) => {
    const {title} = props;
    return (
        <h1>{title}</h1>
    );
};
export default Blog;

Lifting State Up

We cannot pass states from child to parent component. React follows a top-down approach for passing state between many level components. When a parent component needs the state we need to lift the state up to the parent component and pass this as a prop to the child components. This is called lifting state up.

Props Drilling and Context API

When data are passed from component to component by props on a deeper level this is called props drilling.
The best way to pass data 4-5 layers down is using context API. Context API is used to pass multiple data all over the document which is simple and easy to use. Whenever we need to share multiple data between many level components we can use context API to provide those data to the whole document.
First, we have to create a context then we have to wrap our document between context Providers where we should specify the value we want to pass. We can get the value we provide from anywhere with the help of useContext hook.

Custom hook

Hooks are mainly a JavaScript function that can perform some task and returns the results we need. Building our own custom hook will help us to simplify our code which is easy to understand. For creating a custom hook we have to create a JavaScript function and export it so that it can be imported from any component we want and use it.

import { useState } from "react";

const useProducts = () => {
    const [products, setProducts] = useState([]);
    fetch(url)
    .then(res => res.json())
    .then(data => setProducts(data));
    return { products };
};

export default useProducts;

const products = useProducts();

Performance Optimization

To optimize a react.js app we should try to divide different parts of our application into smaller chunks, use react fragments to avoid unnecessary elements for wrapping, try to avoid using an index as a key for the map, using useMemo, pure component, use of spread operator, passing object as props, etc. which will prevent unnecessary component re-render in React.js.