react_interview_topics.md

Content

• Lifecycle Methods

Short notes

• Mounting means putting elements into the DOM.

Lifecycle Methods

source: https://designtechworld.medium.com/react-lifecycle-methods-how-and-when-to-use-them-d0f4522a7cba

Mounting Phase

• constructor(props): when a component is created. It is used to initialize the component’s state and bind event handlers. The constructor receives the component’s props as an argument and should always call super(props) before any other statements.
• static getDerivedStateFromProps(props, state): It receives the component’s props and state as arguments and should return an object representing the updated state based on the props. If you don’t need to update the state, you can return null.
• render()
• componentDidMount: it execute when component render first time

Updating Phase

• static getDerivedStateFromProps(props, state): It receives the component’s props and state as arguments and should return an object representing the updated state based on the props. If you don’t need to update the state, you can return null.
• shouldComponentUpdate(nextProps, nextState): called before rendering when new props or states are received.
• render():
• getSnapshotBeforeUpdate(prevProps, prevState):
• componentDidUpdate(prevProps, prevState): invoked immediately after the component’s updates are reflected in the DOM

Unmounting Phase

• componentWillUnmount()

Lazy Loading

Lazy Loading in React JS helps to optimize the performance of React applications. The data is only rendered when visited or scrolled it can be images, scripts, etc. Lazy loading helps to load the web page quickly and presents the limited content to the user that is needed for the interaction lazy loading can be more helpful in applications that have high-resolution images or data that alters the loading time of the application.

import React from "react";
import { Suspense, lazy } from "react";

const Component1 = lazy(() => import('../src/LazyContent/myComponent1'))
const Component2 = lazy(() => import('../src/LazyContent/myComponent2'))

function App() {
	return (
		<>
			<h1> Lazy Load</h1>
			<Suspense fallback={<div>Component1 are loading please wait...</div>}>
				<Component1 />
			</Suspense>
			<Suspense fallback={<div>Component2 are loading please wait...</div>}>
				<Component2 />
			</Suspense>
		</>
	);
}

export default App;

React Hooks

Read from: https://react-hooks-cheatsheet.com

Custom Hooks

SSR vs CSR