react-advance

What are the differences between functional and class components?
A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element. A class component requires you to extend from React. Component and create a render function which returns a React element. There is no render method used in functional components

. What are the different lifecycle methods in React?
As everything goes through a cycle of taking birth, growing, and death the same goes with React. Each component in React has a lifecycle that goes through three main phases Mounting, Updating, and Unmounting. The react lifecycle method is used in the React class component.

Explain Strict Mode in React.
StrictMode is a tool for highlighting potential problems in an application. Like Fragment StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.

Explain React state and props.
Props are used to pass data, whereas state is for managing data. Data from props is read-only, and cannot be modified by a component that is receiving it from outside. State data can be modified by its own component, but is private (cannot be accessed from outside

Name a few techniques to optimize React app performance.
performance Optimization Techniques for React Apps Using Immutable Data Structures. ... Function/Stateless Components and React. ... Multiple Chunk Files. ... Use React. ... Avoid Inline Function Definition in the Render Function. ... Throttling and Debouncing Event Action in JavaScript. ... Avoid using Index as Key for map.

What are keys in React?
A “key” is a special string attribute you need to include when creating lists of elements in React. Keys are used to React to identify which items in the list are changed, updated, or deleted. In other words, we can say that keys are used to give an identity to the elements in the lists.

How to pass data between react components?
1. Method 1: Integrate the methods mentioned above . 2. Method 2: Use Redux by maintaining the states of all child components that you might need in a global store and obtain the data from said store. 3. Method 3: Utilize React's Context API. 4. Step 1: Generate a provider component for the two child components.

What is the main difference between Angular and React?
Angular allows two-way data binding while React allows one-way data binding. Two-way data binding means that any changes you make to the model affect the view, and vice versa. One-way data binding means any changes you make to the model affect the view, but not the other way around

What is React Router?
React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

Explain the use of CSS modules in React.
CSS Modules tries to solve a problem that you might encounter when working on medium to large projects and that is global scoping in CSS. By default CSS scoping is global and the reason for this is that we want of styles to cascade throughout our project.

What can you do with HOC?
The purpose of a HOC is to enhance a component (usually a dumb component) with extra functionality. A HOC allows for reusability since in real-life applications there is a need to re-use the same functionalities in various similar kinds of components. A very common functionality is toggling
Higher order components use its make news components and as pass new agruments

what is memo funtion in react.js
The useMemo is a hook used in the functional component of react that returns a memoized value. In Computer Science, memoization is a concept used in general when we don't need to recompute the function with a given argument for the next time as it returns the cached result.

what is lazy funtion in react.js
We can control internal function its render or reload again we prevent and control this via memo function
lazy() It is a new function in react that lets you load react components lazily through code splitting without help from any additional libraries. Lazy loading is the technique of rendering only-needed or critical user interface items first, then quietly unrolling the non-critical items later.
suspense fallback="Home" suspense