React is a JavaScript library created by Facebook. It is a User Interface (UI) library that is use for building UI components. Although React is a library rather than a language, it is widely used in web development. React offers various extensions for entire application architectural support, such as Flux and React Native, beyond mere UI.

• React is a front-end JavaScript library developed by Facebook in 2011.
• Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.
• It is used for developing complex and interactive web and mobile UI.
• It follows the component based approach which helps in building reusable UI components.

• Easy creation of dynamic applications
• Improved performance 
• Reusable components
• Dedicated tools for easy debugging
• Small learning curve
• Unidirectional data flow

• Virtual Document Object Model (DOM)
• JSX
• Components in React
• Architecture
• Props in React
• Extensions
• Data Binding
• Debugging
• State in React

Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. 

This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

useRef returns a mutable ref object whose current property is initialized to the passed argument (initialValue).

The returned object will persist for the full lifetime of the component.

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases (if your previous and new value are same then component will not re-render).

This is all less complicated than it may seem. Traditionally in React, you’d set state, and your UI would update. Life was simple. But it also led to the sorts of inconsistencies described above. 

What Suspense adds is the ability to have a component notify React at render time that it’s waiting for asynchronous data. This is called suspending, and it can happen anywhere in a component’s tree, as many times as needed, until the tree is ready. When a component suspends, React will decline to render the pending state update until all suspended dependencies have been satisfied.

A higher-order component (HOC) is an advanced technique in React for reusing component logic. 

HOCs are not part of the React API. They are a pattern that emerges from React’s compositional nature. We need an abstract method so we use HOC as abstract class. Abstraction that allows us to define this logic in a single place and share it across components.

(An abstract class is a class that contains at least one abstract method. An abstract method is a method that is declared, but not implemented in the code. An abstract class or method is defined with the abstract keyword).
    
Concretely, a higher-order component is a function that takes a component and returns a new component. In javascript, Callback Functions is called HOC.

The Component Lifecycle
Each component has several “lifecycle methods” that you can override to run code at particular times in the process.
In the list below, commonly used lifecycle methods are marked as --. The rest of them exist for relatively rare use cases.

A) Mounting
These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

constructor() --
static getDerivedStateFromProps()
render() --
componentDidMount() --

Note:
These methods are considered legacy and you should avoid them in new code:
UNSAFE_componentWillMount()


B) Updating
An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:

static getDerivedStateFromProps()
shouldComponentUpdate()
render() --
getSnapshotBeforeUpdate()
componentDidUpdate() --

Note:
These methods are considered legacy and you should avoid them in new code:
UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps()


C) Unmounting
This method is called when a component is being removed from the DOM:

componentWillUnmount() --

This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

The Effect Hook, useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.

"Create" wouldn’t be quite accurate because the state is only created the first time our component renders. During the next renders, useState gives us the current state.

Otherwise it wouldn’t be “state” at all! There’s also a reason why Hook names always start with use.

This requirement is common enough that it is built into the useEffect Hook API. You can tell React to skip applying an effect if certain values haven’t changed between re-renders. To do so, pass an array as an optional second argument to useEffect:

The createElement() method creates an element node with the specified name.
It takes 3 parameter

1: Attribute
2: Class
3: Text

Yes! Consider:

Yes.

 

Refs is the short hand for References in React. It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render config function.

• When you need to manage focus, select text or media playback
• To trigger imperative animations
• Integrate with third-party DOM library.

HOC can be used for many tasks like:

• Code reuse, logic and bootstrap abstraction
• Render High jacking
• State abstraction and manipulation
• Props manipulation

Limitations of React are listed below:

• Its library is very large and takes time to understand
• Coding gets complex as it uses inline templating and JSX
• It can be little difficult for the novice programmers to understand
• React is just a library, not a full-blown framework

Props	State
Props are immutable — they can't be modified after they've been set.	The data is stored in the state, which might change over time.
Props are used to send data and event handlers to a component's children.	The data of the components that must be presented to it store the view in the state.
The parent component sets props for the children components.	Event handlers are typically responsible for updating the state.
Both functional and class components can benefit from the use of props.	Only class components can use the state.

• Keys are used for identifying unique Virtual DOM Elements with their corresponding data driving the UI.
• They help React to optimize the rendering by recycling all the existing elements in the DOM.
• These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them.
• This leads to increase in application’s performance.

Flux is an architectural pattern which enforces the uni-directional data flow.

It is not a library nor a framework.

It controls derived data and enables communication between multiple components using a central Store which has authority for all data.

Any update in data throughout the application must occur here only. Flux provides stability to the application and reduces run-time error.

Flux applications have three major roles in dealing with data:
1. Dispatcher
2. Stores
3. Views (React components)

Redux is composed of the following components:

• Action :– It’s an object that describes what happened.
• Reducer :–  It is a place to determine how the state will change.
• Store :– State/ Object tree of the entire application is saved in the Store.
• View :– Simply displays the data provided by the Store.

JSX is a shorthand for JavaScript XML. It is a React extension which allows writing JavaScript code that looks similar to HTML.

It makes HTML file easy to understand. The JSX file makes the React application robust and boosts its performance.

JSX provides you to write XML-like syntax in the same file where you write JavaScript code, and then preprocessor (i.e: transpilers like Babel) transform these expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children.

Browsers cannot read JSX directly because they can only understand JavaScript objects, and JSX is not a regular JavaScript object.

Thus, we need to transform the JSX file into a JavaScript object using transpilers like Babel and then pass it to the browser.

Although a <div> is used to encapsulate multiple routes inside the router. The 'switch' keyword is used when you want to display only a single route to be rendered amongst the several defined routes.

The <switch> tag when in use matches the typed URL with the defined routes in sequential order. When the first match is found, it renders the specified route. Thereby bypassing the remaining routes.

There have 3 property:

createContext, Provider and UseContext.

Simply we can say, Provider and Consumer concept. Here we replace Consumer with useContext() hook.

A callback function which will be invoked when setState has finished and the component is re-rendered. It is used for show response on browser or console.

Since the setState is asynchronous, which is why it takes in a second callback function. With this function, we can do what we want immediately after state has been updated.

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

The Shadow dom is a browser technology designed primarily for scoping variables and CSS in web components. The Virtual don is a concept implemented by libraries in JavaScript on top of browser APIs.

When a component's, props or state change, React decides whether an actual dom update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.

JSX as we know javascript xml or extinsion. In javascript we can not direct write html code so jsx provide facility to write html directly into javascript. JSX converts HTML tags into react elements. But still our browser does not able to render this code to browser because we need a compiler that can compile html to browser so we use Babel.

It's common pattern in react which is used for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

The following lifecycle methods going to be unsafe coding practices and will be more problematic with async rendering.

• componentWillMount()
• componentWillReceiveProps()
• componentWillUpdate()

If you are rendering your component using JSX, the name of that component has to begin with a capital letter otherwise React will thrown an error as unrecognized tag. This convention is only because HTML elements and SVG tags can begin with lowercase letter.

DOM stands for Document Object Model. React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. A Virtual DOM is a lightweight JavaScript object which is an in-memory representation of real DOM. It is an intermediary step between the render function being called and the displaying of elements on the screen.

It is similar to a node tree which lists the elements, their attributes, and content as objects and their properties. The render function creates a node tree of the React components and then updates this node tree in response to the mutations in the data model caused by various actions done by the user or by the system.

When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects.

By default, when your component's state or props change, your component will re-render. If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate().

The state is an instance of React Component Class can be defined as an object of a set of observable properties that control the behavior of the component. In other words, the State of a component is an object that holds some information that may change over the lifetime of the component.

States are the heart of React components. States are the source of data and must be kept as simple as possible. Basically, states are the objects which determine components rendering and behavior. They are mutable unlike the props and create dynamic and interactive components.

When you want to access this.props in constructor() then you should pass props to super() method.

The react package contains React.createElement(), React.Component, React.Children, and other helpers related to elements and component classes.

You can think of these as the isomorphic or universal helpers that you need to build components. The react-dom package contains ReactDOM.render(), and in react-dom/server we have server-side rendering support.

useEffect can take only 2 parameter.

No, we have to use setState or useState, because it re-render component.

Arrow functions are more of short syntax for writing the function expression. They are also called 'fat arrow' (=>) the functions.

These functions allow to bind the context of the components properly since in ES6 auto binding is not available by default.

Arrow functions are mostly useful while working with the higher order functions.

With the help of super keyword, we can access all propery of parent class. Because super always used in child class or extended class or simply we can say in Inheritance.

ReactJS	React Native
It is used for developing web applications.	It is used for developing mobile applications.
Initial release in 2013.	Initial release in 2015.
It uses a JavaScript library and CSS for animations.	It comes with built-in animation libraries.
It can be executed on all platforms.	It is not platform independent. It takes more effort to be executed on all platforms.
It uses HTML tags.	It does not use HTML tags.

Real DOM	Virtual DOM
The real DOM can directly update HTML.	The virtual DOM cannot directly update HTML.
The real DOM updates slower.	The virtual DOM updates faster.
There is a lot of memory wastage in The real DOM.	There is no memory wastage in the virtual DOM.
In real DOM, DOM manipulation is very expensive.	In virtual DOM, DOM manipulation is very easy.

It is mandatory for each React component to have a render() function.

Render function is used to return the HTML which you want to display in a component.

If you need to rendered more than one HTML element, you need to grouped together inside single enclosing tag such as <div>, <form>, <group> etc.

This function returns the same result each time.

In Redux, a reducer is a pure function that takes an action and the previous state of the application and returns the new state.

The action describes what happened and it is the reducer's job to return the new state based on that action.

The reducer takes 2 parameters: state and action

An event is an action that a user or system may trigger, such as pressing a key, a mouse click, etc.

• React events are named using camelCase, rather than lowercase in HTML.
• With JSX, you pass a function as the event handler, rather than a string in HTML.

Stateless Component	Stateful Component
The stateless components do not hold or manage state.	The stateful components can hold or manage state.
It is also known as a functional component.	It is also known as a class component.
It does not contain the knowledge of past, current, and possible future state changes.	It can contain the knowledge of past, current, and possible future changes in state.
It is simple and easy to understand.	It is complex as compared to the stateless component.
Stateless components cannot be reused.	Stateful components can be reused.
It does not work with any lifecycle method of React.	It can work with all lifecycle method of React.

• The application is consistent regardless of the browser it is running in. Here, preventDefault is a synthetic event.
• Synthetic events combine the response of different browser's native events into one API, ensuring that the events are consistent across different browsers.

Actions are objects that have a type property and any other data that it needs to describe the action.

The new getSnapshotBeforeUpdate() lifecycle method is called right before DOM updates.

The return value from this method will be passed as the third parameter to componentDidUpdate()

Controlled and Uncontrolled component differ in the way they access the data from the form elements (<input>, <textarea>, <select>). An uncontrolled component is a component that renders form elements, where the form element's data is handled by the DOM (default DOM behavior). 

To access the input's DOM node and extract it's value you can use a ref.
        
In a controlled component, the form element's data is handled by the React component (not DOM) and kept in the component's state.

 

• Forms are used for many different tasks such as user authentication, searching, filtering, indexing, etc
• Using forms, users can interact with the application and enter the required information whenever needed. Form contain certain elements, such as text fields, buttons, checkboxes, radio buttons, etc

1. Initial Rendering Phase
2. Updating Phase
3. Unmounting Phase

# for Single line comments

/*
Multi-line comments
*/

Element	Component
An element is a plain JavaScript object which describes the component state and DOM node, and its desired properties.	A component is the core building block of React application. It is a class or function which accepts an input and returns a React element.
It's immutable.	It's mutable.
It only holds information about the component type, its properties, and any child elements inside it.	It can contain state and props and has access to the React lifecycle methods.

sessionStorage is like localStorage, the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends.

 

Features	LocalStorage	SessionStorage
Capacity	10mb	5mb
Accessible From	Any Window	Same Window
Expire	Never	On tab close

To update the state of a component, you use the setState method. However it is easy to forget that the setState method is asynchronous, causing tricky to debug issues in your code. The setState function also does not return a Promise. Using async/await or anything similar will not work.

1. Fragments are faster and consume less memory because it did not create an extra DOM node.
2. The DOM Inspector is less cluttered.
3. Some CSS styling like CSS Grid and Flexbox have a special parent-child relationship and add <div> tags in the middle, which makes it hard to keep the desired layout.

Props validation is a tool which helps the developers to avoid future bugs and problems. React components used special property PropTypes that help you to catch bugs by validating data types of values passed through props, although it is not necessary to define components with propTypes. It makes your code more readable. 

We can apply validation on props using App.propTypes in React component. After specifying the validation patterns, you need to set the App.defaultProps. When some of the props are passed with an invalid type, you will get the warnings on JavaScript console.

Class Components	Functional Components
Complex as compared to the stateless component.	Simple and easy to understand.
Can hold or manage state.	Cannot hold or manage state.
Can be reused.	Cannot be reused.
Can work with all lifecycle methods.	Does not work with any lifecycle method.

Anyone who has worked in React would have faced this and if not then will face it definitely. Prop drilling is basically a situation when the same data is being sent at almost every level due to requirements in the final level. 

it’s situation where you are passing your props down to 3rd - 4th or Nth level in your components hierarchy.

Yes

Event bubbling is a method when an event is in an element inside another element, is called event bubbling. Means there have parents and child event. When we click on child event then first it hit child and then parent and then onward, it's called event bubbling. In normal way, we use event bubling. And in capturing, its just reverse of event bubling, the event goes top to down element.

We just need to put true or false to convert eact other. If it’s true then Capturing if it’s false then Bubling.

With the help of dispatch() [useDispatch] function we can pass data to action.

dispatch() bascically a function that is used to pass data either string, number or object can be send to action.

Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook's Flux architecture, it was created by Dan Abramov and Andrew Clark.

In short, Redux is a way to manage the "state" or we can say it is a cache or storage that can be accessed by all components with a structured way. It has to be accessed through a "Reducer" and "Actions".

While it’s mostly used as a state management tool with React, you can use it with any other JavaScript framework or library. It’s lightweight at 2KB (including dependencies), so you don’t have to worry about it making your application’s asset size bigger.

Redux allows you to manage your app’s state in a single place and keep changes in your app more predictable and traceable. It makes it easier to reason about changes occurring in your app.

Benefits of Redux:

1. Centralization
2. Predictability
3. Time-Travel Debugging

1. When multiple components need to access the same application state
2. When application state is updated frequently
3. When you’re working on a large application with several other people

Applications that consist of mostly simple UI changes most often don’t require a complicated pattern like Redux. Sometimes, old-fashioned state sharing between different components works as well and improves the maintainability of your code.

Also, you can avoid using Redux if your data comes from a single data source per view. In other words, if you don’t require data from multiple sources, there’s no need to introduce Redux.

Therefore, make sure to check if you need Redux before introducing its complexity.

With the help of useSelector() method, we can get data from store/reducer. Need to just call state.reducer name. useSelector is a function that takes the current state as an argument and returns whatever data you want from it. It's​ Allows you to extract data from the Redux store.

Lists are used to display data in an ordered format. In React, Lists can be created in a similar way as we create it in JavaScript. We can traverse the elements of the list using the map() function.

React offers a stateful, reactive approach to build a form. The forms in React are similar to HTML forms. But in React, the state property of the component is only updated via setState(), and a JavaScript function handles their submission. This function has full access to the data which is entered by the user into a form.

React Router is a routing library built on top of React, which is used to create routes in a React application. 

It maintains consistent structure and behavior and is used to develop single-page web applications. 

Enables multiple views in a single application by defining multiple routes in the React application.

React Routing	Normal Routing
The user navigates multiple views in the same file.	The user navigates multiple files for each view.
Single HTML page.	Each view is a new HTML file.
Improved performance.	Slower performance.
The page does not refresh since it is a single file.	The page refreshes every time user navigates.

We can modularize code by using the export and import properties. They help in writing the components separately in different files.

Redux uses ‘Store’ for storing the application’s entire state at one place. So all the component’s state are stored in the Store and they receive updates from the Store itself. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.

Hence this concept is called the Single source of truth.

• Predictability of outcome
• Community and ecosystem
• Maintainability
• Developer tools
• Server-side rendering
• Organization
• Ease of testing

1. Inline Styling
2. JavaScript Object
3. CSS Stylesheet

Create React App is a tool to build React applications. It provides you to create single-page React applications. The create-react-app are preconfigured, which saves you from time-consuming setup and configuration like Webpack or Babel.
 

• It includes a fast, interactive unit test runner with built-in support for coverage reporting.
• It includes Autoprefixed CSS, so you don't need -webkit- or other prefixes.
• It includes a build script to bundle JS, CSS, and images for production, with hashes and source maps.
• It includes a live development server that warns about common mistakes.
• It includes React, JSX, ES6, and Flow syntax support.

NPM	NPX
Npm is a tool that use to install packages.	Npm is a tool that use to install packages.
Packages used by npm are installed globally.	Packages used by npx are not installed globally.
To use create-react-app in npm the commands are npm install create-react-app then create-react-app.	In npx you can use that without installing like npx create-react-app.

If a component needs state or lifecycle methods, we should use the class component, otherwise, use the function component

Ref forwarding is a feature which is used for passing a ref through a component to one of its child components. It can be performed by making use of the React.forwardRef() method. It is particularly useful with higher-order components and specially used in reusable component libraries.

The preferred option is to use callback refs over findDOMNode() API. Because callback refs give better control when the refs are set and unset whereas findDOMNode() prevents certain improvements in React in the future.

You may not need a service worker for your application. If you are creating a project with create-react-app it is invoked by default. A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. They already include features like push notifications and background sync and have ability to intercept and handle network requests

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes.

Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.

1. Only call Hooks at the top level
2. Only call Hooks from React functions

An error boundary is a concept introduced in version 16 of React. Error boundaries provide a way to find out the errors that occur in the render phase. Any component which uses one of the following lifecycle methods is considered an error boundary.

• Render phase
• Inside a lifecycle method
• Inside the constructor

• Asynchronous code using setTimeout or requestAnimationFrame callbacks.
• In the case when errors are thrown in the error boundary code itself.
• During the server-side rendering.
• Error boundaries don't catch errors inside the event handlers.

• It makes the application debugging hard.
• It makes the application slow and inefficient.
• DOM manipulation was very expensive.
• There was a huge memory wastage.

You need to export the Store from the module where it created with createStore() method.

If you try to update the state directly then it won't re-render the component.

// Wrong way
this.state.message = 'Programming Path'

Instead use setState() method. It schedules an update to a component's state object.

// Correct way
this.setState({ message: 'Programming Path' })

You can use either if statements or ternary expressions which are available from JS to conditionally render expressions. Apart from these approaches, you can also embed any expressions in JSX by wrapping them in curly braces.

Fiber is the new reconciliation engine or reimplementation of core algorithm in React v16. The goal of React Fiber is to increase its suitability for areas like animation, layout, gestures, ability to pause, abort, or reuse work and assign priority to different types of updates and new concurrency primitives.

There are memoize libraries available which can be used on function components.

For example moize library can memoize the component in another component.

React is already equipped to handle rendering on Node servers. A special version of the DOM renderer is available, which follows the same pattern as on the client side.

Both render props and higher-order components render only a single child but in most of the cases Hooks are a simpler way to serve this by reducing nesting in your tree.

redux-saga is a library that aims to make side effects (asynchronous things like data fetching and accessing the browser cache) in Redux applications easier and better.

The React.lazy function lets you render a dynamic import as a regular component.

It will automatically load the bundle containing the OtherComponent when the component gets rendered.

React.Suspense enables you to specify the loading indicator in the event that the components in the tree below it are not yet ready to render.