React Tricky Concept

                             My React-Blogs

JSX, Working process of it

**
JSX which stands for JavaScript XML, allows writing Html in react. It’s a React extension that allows writing JavaScript code that looks similar to Html. It makes HTML files easy to understand. The JSX file makes the React application very strong and boosts its performance. Basically, it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML, like template syntax. JSX converts HTML tags into react elements.

Working System: JSX expressions are JavaScript expressions too. When compiled, they actually become regular JavaScript objects. We know JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() or appendChild() methods. JSX converts HTML tags into react elements. Since they are compiled to objects, JSX can be used wherever a regular JavaScript expression can be used. We are not required to use JSX, but JSX makes it easier to write React applications. Some benefits of using JSX-
• JSX makes it easier and faster to write templates.
• It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.
• it is type-safe, and most of the errors can be found at compilation time.
• Instead of separating technologies by putting markup and logic in separate files, react uses components that contain both.

Virtual DOM, The differences between virtual and real DOM

Or The working process of diff algorithm
**
The Virtual DOM is a concept where the real DOM is kept in a memory, a representation of Real DOM. The representation of a user interface is kept in memory and synced with the real DOM. It's a step that happens between the render function when called and the displaying of elements on the screen. Called this process is reconciliation.

Virtual DOM works in 3 simple steps-
• When any data changes in the React Application, the entire user interface is re-rendered in Virtual DOM representation.
• Then the difference between the previous DOM representation and the new one is calculated.
• Once the calculations are done, the real DOM will be updated with that thing have actually changed.
The differences between virtual Dom and the real Dom are given below-
Real DOM Virtual Dom
Real DOM update slowly Virtual DOM updates faster
Allows a direct update from Html Can’t be used to update Html directly
Wastes too much memory Memory consumption is less

Diff algorithm: The main work of a diff algorithm is to find a heuristic to change anything from a state to another state. A diff algorithm gives the outputs that is the set of differences between two inputs. Working process of diff algorithm is-

When the Virtual DOM is created, react compares the representation with a snapshot of the previous version of the virtual DOM to see exactly which elements have changed.

When the difference is cleared, react updates only those objects that differ on the actual DOM and the browser re-paints the screen. The next time state/props changes for a component in the application, a new virtual DOM tree of React elements will be created and the process will repeat again and again.
The process of checking the difference between the new Virtual DOM tree and the old Virtual DOM tree is called diffing. Diffing is accomplished by a heuristic O(n) algorithm. During this process, react will deduce the minimum number of steps needed to update the real DOM, removing unnecessary costly changes. This process is also called reconciliation. React implements a heuristic O(n) algorithm based on two assumptions:
• Two elements of different types will produce different trees.
• The developer can hint at which child elements may be stable across different renders with a key prop.”

Context API in React

**
Context allows passing data through the component tree without passing props down manually at every level. Context API is a React API that can solve a lot of problems that modern applications face related to state management and how they're passing state to their components. The React Context API is a component structure, that allows us to share data across all levels of the application. The main aim of Context API is to solve the problem of prop drilling. By using context api we can share values between our components without using props every time.

Hooks in React

**
React hooks are-
• useContext
• useState
• useEffect
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue
**

The life cycle of React componen

**t
React Component lifecycle
Each component in React has a lifecycle. React lifecycle methods are given below-
React component lifecycle have four phases. They are –

Initial Phase • getDefaultProps():This is executed before the creation of the component. • getInitialState(): It is used to specify the default value of this.state. It is invoked before the creation of the component.
Mounting Phase • componentWillMount(): This is invoked immediately before a component gets rendered into the DOM. In the case, when you call setState() inside this method, the component will not re-render. • componentDidMount(): Is executed when the component gets rendered and placed on the DOM.. • render() : This method is defined in each and every component. It is responsible for returning a single root HTML node element. If you don't want to render anything, you can return a null or false value.
Updating Phase: • componentWillRecieveProps(): It is invoked when a component receives new props. If you want to update the state in response to prop changes, you should compare this.props and nextProps to perform state transition by using this.setState() method. • shouldComponentUpdate(): Is invoked when a component determines changes to the DOM and returns a “true” or “false” value based on certain conditions • componentWillUpdate(): It is invoked just before the component updating occurs. Here, you can't change the component state by invoking this.setState() method. It will not be called, if shouldComponentUpdate() returns false. • render(): It is invoked to examine this.props and this.state and return one of the following types: React elements, Arrays and fragments, Booleans or null, String and Number. If shouldComponentUpdate() returns false, the code inside render() will be invoked again to ensure that the component displays itself properly. • componentDidUpdate(): It is invoked immediately after the component updating occurs. In this method, you can put any code inside this which you want to execute once the updating occurs. This method is not invoked for the initial render
Unmounting Phase • componentWillUnmount(): This method is invoked immediately before a component is destroyed and unmounted permanently. It performs any necessary cleanup related task such as invalidating timers, event listener, canceling network requests, or cleaning up DOM elements. If a component instance is unmounted, you cannot mount it again.

The purpose of a custom hook and creating custom hook with example.

**
Hooks are reusable functions. Custom Hooks are a mechanism to reuse stateful logic. Custom hooks allow us to have cleaner functional components, remove logic from the UI layer, and prevent code duplication by bringing common use cases to reusable hooks. A custom Hook is a JavaScript function. The name of custom Hook starts with "use" which can call other Hooks. A custom Hook is just like a regular function, and the word "use" in the beginning tells that this function follows the rules of Hooks. Building custom Hooks allows us to extract component logic into reusable functions.
Custom Hooks are a convention that naturally follows from the design of Hooks, rather than a React feature. The main reason for which you should be using Custom hooks is to maintain the concept of DRY(Don’t Repeat Yourself) in your React apps.

import { useState, useEffect } from "react";

const useFetch = (url) => {
const [data, setData] = useState(null);

useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => setData(data));
}, [url]);

return [data];
};

export default useFetch;

We have created a new file called useFetch.js containing a function called useFetch which contains all of the logic needed to fetch our data.