There are three different phases of lifecycle of React components

1. Initial Rendering Phase: This is the phase when the component is about to start its journey and added to the DOM
2. Updating Phase: Once the component is added to the DOM, it can update and re-render only when a prop or a state change occurs.
3. Un mounting Phase: This is the final phase of the component life cycle in which the component is destroyed and removed from the DOM

Keys helps react identify which items have changed or added or removed. Key is a string attribute needs to be included mostly when we are working on list items. Key prop is not accessible in the child component

Keys should be used on array elements to provide an unique identity for each element

React do not understand the order of the list item if we do not provide it with the key

only with the key, React understands which particular item is edited, deleted, added or updated

Render the list items with map, do not use loops. Give each item a unique key, do not use array index as the key value

• When the items in your list do not have a unique id
• When the list is static and you know it will not change
• When you know the list will never be reordered or filtered

It is a helper function provided by React which allows us to write better code by activating additional checks and warnings for its descendants

It is the advanced method of reusing the component functionality logic, it is easy to handle, makes code more readable, clean, efficient and more modular.

It takes another component as input and returns a wrapped version of itself

There are multiple ways of calling the Api in React.

You can use browser Api fetch to call Api, using external library Axios you can call it

React hooks are used in the functional components, as functional components are stateless components and also we don't have lifecycle methods. React has introduced hooks to maintain the state in the functional component.

Hook is a special function that lets you to hook into special features, hooks allows you to add react state to functional components

Types of Hooks

• useState
• useEffect
• useReducer
• useMemo
• useContext
• useRef
• useCallback
• useTransition
• we can also have our custom hooks

• Only call hooks at the top level
• Don't call hooks inside the loops, conditions or nested functions
• Only call hooks in the react functional components, not in the regular javascript functions
• Hooks can be used in custom hooks

It is a feature of React which returns multiple elements

Fragment allow us to wrap all our list of elements without adding extra nodes to the DOM

The useState() is a React hook which is used in functional components, it allows you to have state variables and have state in functional components. It should be used when the DOM has something that is dynamically manipulating. In class component the state is always an object. In functional components the state does not need to be an object. It can be any data value. useState hook returns an array with two elements. The first one is a current value of the state and the second one is a state setter function. New state value depends on the previous state value, you can pass a function to the setter function.

The setState() will merge the values automatically where as in useState setter function, you have to manually merge the values. For example, when updating the value of a property in a object, you have to spread the old state and then update the properties of that state, this will preserve all state values

The Children prop allow us to pass JSX into an element.

Whenever multiple sibling components need access to the same state, we move that piece of state up to the first common parent component

State that is computed from an existing piece of state or props

The useEffect hook lets you perform side effects in functional components

It is the replacement for componentDidMount, componentDidUpdate, componentWillUnmount

useEffect is used for handling side effects in the functional components

Class is a reserved keyword in javascript, our jsx gets compiled into javascript, there would be a conflict if we use class for css styling, javascript thinks that you trying to create javascript class, so for that reason class is className in jsx.

Ternaries are the best comparing to and operator, the reason is sometimes you get into specific problem like your left side of expression evaluates to zero which is false then it doesn't bother about right side of expression and returns false.

In a class component we can use lifecycle method componentDidMount. In functional component we can use useEffect hook which will run after the component is rendered and should pass the second argument an empty dependency array which means it will only run once.

The data flow in React is unidirectional. All the components in react have parent child relationship that we are passing down the data from parent to child in one direction, so all the data is going in one direction through the props. we share the data multiple layers deeper by passing the props downs which is called prop drilling.

JSX stands for javascript XML. It allows to write html inside the javascript and place into the DOM without writing the javascript functions like createElement, appendChild etc.

JSX provides syntactic sugar for React.createElement() function.

We can create react applications without using JSX as well

Class components are stateful components where as Functional components are stateless components, after the introduction of hooks in react, functional components are also stateful components with the usage of hooks.

Controlled and uncontrolled components are the different approaches to handling form input elements in react

In uncontrolled components you can only retrieve the value once on submit, validate the from on submit

In controlled components you can do field level validations, conditionally disabling submit buttons, enforcing input format and dynamic inputs

In a controlled component, the value of the input element is controlled by React. The state of the input is stored inside the code, and by event callbacks, any changes made to the input element will be reflected in the code as well

When a user enters data inside the input of a controlled component, onChange function is triggered and inside the code we check whether the entered value is valid or not. If it is valid then we change the state and re-render the input element with the new value

In an uncontrolled component, the value of the input element is handled by the DOM itself. Input elements inside uncontrolled components work like normal HTML input form elements. The state of the input element is handled by the DOM. Whenever the value of the input element is changed, event based callbacks are not called. React does not perform any action when there are changes made to the input element. Whenever user enters data inside the input field, the updated data is shown directly. To access the value of the input element, we can use ref

Error boundaries are React components that catch javascript errors in their child component tree, log those errors and display a fall back UI.

A class component becomes error boundary by defining either or both of getDerivedStateFromError and componentDitCatch lifecycle methods

The placement of the error boundary also matters as it controls if the entire application should have the fall back UI or the component causing the problem

Virtual DOM is a concept where a virtual representation of the DOM is kept inside the memory and is synced with the Real DOM by a library called ReactDOM.

Every application deals with the DOM Manipulation, but the DOM manipulation is very slow when compared to other operations in javascript. The performance of the application is affected when several DOM manipulations are done. For every DOM change entire DOM is updated.

For a small change in the list item, instead of that item has to update, entire list is rendered again and the DOM is updated, which affects the performance of our application

To address this kind of inefficient updating, the react team came up and introduced the concept of virtual DOM

For every DOM object, there is a virtual DOM object, which is a copy of Real DOM. The difference between the Real DOM and the Virtual DOM is, any changes in the Virtual DOM will not directly reflect on the screen.

Consider a virtual DOM object as a blueprint of the real DOM object, whenever a JSX element gets rendered, every virtual DOM object gets updated

updating the virtual DOM is much faster then updating the real DOM since we are just updating the copy of the Real DOM

React uses two virtual DOM's to render the user interface. One of them used to store the current state of the objects and the other is used to store the previous state of the objects. Whenever the virtual DOM is updated, react compares the two virtual DOM's and get to know about which virtual DOM objects were updated, react updates on those objects inside the real DOM instead of rendering the complete real DOM.

Memoize in react is responsible for cache storing and improving performance

It is used to target the DOM elements directly, it preserves the value, it creates a mutable variable which does not trigger re-renders

A custom hook is a javascript function whose name starts with use. A custom hook can also call other hooks if required.

custom hook allows us to reuse the functionality

custom hook is like alternative to HOC and render props. Easy to share logic using custom hook instead of duplicate code in components

It is a pattern where a function takes a component as an argument and returns a new component.

The term render prop refers to a technique for sharing code between React components using a prop whose value is a function

useMemo is a react hook, we can return memoized values and avoid re-rendering if the dependencies to a function have not changed

React.memo allows us to make a component only render if it's prop that it's accepting or in fact changing just because the parent component is changing but if the incoming props have not changed I don't want to render again

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

or

React context api allows you to easily access data at different levels of the component tree, without passing props to every level

The way the react context API works is such that whenever something changes in your context it has no way of cleverly figuring out which component that uses this context really is concerned and which component is not. Which means that every component that uses use context will rebuild, will re-render when you switch something in that context. No matter if it's directly effected or not. And in general the react context API is simply not optimized and not meant to be your Global State Management tool in your app. It's meant for some states, like authentication status, like the theme but not for all your states because of these missing optimizations and all of this missing intent behind the context API. So, its not better option to use context API in larger projects.

useReducer is a hook that is used for state management. It is an alternative to useState.

• useStateuseReducer
• Number of stateone or twotoo many
• Related state transitions?noyes
• business logicno business logiccomplex business logic
• local vs globallocal stateglobal state
• type of statenumber, string, booleanObject, array

It is used to optimize performance.

useCallback is a hook that will return a memoized version of the callback function that only changes if one of the dependencies has changed

It is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.

use cases of useCallback are when you are fetching the data, every time the component renders the fetch function runs. to memoize this we can use callback and pass the fetch function as a dependency in the array

when using remove item from a list when parent component renders the list also renders, to memoize the remove item function we can use useCallback when the list is not changing

useCallback caches the provided function instance itself where as useMemo invokes the provided function and caches its results.

If you want to cache a function then use useCallback and if you want to cache the results then use useMemo

useMemo returns a memoized value

useCallback returns a memoized function

memoization is an optimization feature in React which, when used in the right place, increases the performance of the application

Improve performance by splitting up a code into smaller, more manageable chunks. We can reduce the size of the initial JavaScript payload that needs to be loaded. This results in faster load times. And improved performance, especially on slow networks or low end devices. Second, better user experience with code splitting, only the essential code needed for the initial render of your application is loaded. The remaining code is loaded as the user interact with your application leading to a smoother, less blocking user experience.

useLayoutEffect run synchronously after a render but before the screen is updated

useEffect run asynchronously after a render is paint to the screen

Redux

Redux is a state management library. Redux is a predictable state container for javascript apps.

Redux stores the state of your application

• Holds application state
• Allows access to state via getState()
• Allows state to be updated via dispatch() function
• Registers listeners via subscribe
• Handles un registering of listeners via the function returned by subscribe

It is an official Redux UI binding library for React. It helps you to connect your react application to redux store

Redux is a store that holds the state of your application

An action that describes the changes in the state of the application

A reducer, which will actually carries out the state transition depending on action

Middleware allows us to extend redux with custom functionality

Middleware provides third-party extension between dispatching an action and the moment it reaches the reducer

Using middleware we can log messages,crash reporting , performing asynchronous tasks etc.

It is a hook that allows you to update the state without blocking the UI. It allows us to mark certain functionality less urgent which can prevent whole ui blocking.

• CSS stylesheets
• Inline css with style object
• Using CSS modules
• Using styled components and add the css in js

Styled components is a css library. we can write css in js in our components. Can apply javascript logic in component css in js. Avoids name collisions. you can write nested css in styles. The styled component wrapper creates a unique class element per page avoiding name collisions.

you can create separate wrapper components and call in respective components, these are only responsible for styling.