Must known react js basic question for Interview

Hooks

React Hooks

Hooks are a new feature added in React v16.8. It allows to use all React features without writing class components. For example, before version 16.8, we need a class component to manage state of a component. Now we can keep state in a functional component using useState hook.

Usestate

useState hook is a function which is used to store state value in a functional component. It accepts an argument as the initial value of the state. It returns an array with 2 elements. First element is the current value of state. Second element is a function to update the state.

useEffect

The Effect hook lets us to perform side effects in functional components. It helps us to avoid redundant code in different lifecycle methods of a class component. It helps to group related code.

useContext

It is used for creating common data that is to be accessed by the components hierarchy without having to pass the props down to each level.

What exactly are custom hooks?

Custom Hooks give us hook access to the React ecosystem, which means we can use all of the known hooks like useState, useMemo, useEffect, and so on.

How can I avoid re-rendering in React?

memo() is used to prevent React function components from re-rendering. Memoization is a type of optimization. It is primarily used to accelerate computation by storing the result of a function and returning the cached result when the same inputs are used again

Use ref

The useRef Hook allows you to persist values between renders.
It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly.

How to create components in react

Components are self-contained and reusable pieces of code. They perform the same function as JavaScript functions, but they work independently and return HTML.

Functional Component or Stateless Component:

• It is simple javascript functions that simply returns html UI
• It is also called stateless components because they simply accept data and display them in some form that is they are mainly responsible for rendering UI.
• It accept properties(props) in function and return html(JSX)
• It gives solution without using state
• There is no render method used in functional components.
• These can be typically defined using arrow functions but can also be created with the regular function keyword.
• It is regular ES6 classes that extends component class form react library

Class components

• Also known as “stateful” components because they implement logic and state.
• It must have render() method returning html
• It has complex UI Logic
• You pass props to class components and access them with this.props

What is Higher order components ?

higher-order component is a function that takes a component and returns a new component. Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

Controlled and uncontrolled components

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component controls it by handling the callback and managing its own state and passing the new values as props to the controlled component

A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

What is JSX?

JSX is a shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This makes the HTML file really easy to understand.

error boundary?

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

React router

React Router refers to the standard library used for routing in React. It permits us for building a single-page web application in React with navigation without even refreshing the page when the user navigates

optimize React app performance.

• Using pure component
• Dependency otimization
• Memoize components - prevent unnecessary re- render
• Use usecallback - trigger when ever dependency change
• Using react lazy

Using useMemo() -

It is a React hook that is used for caching CPU-Expensive functions. Sometimes in a React app, a CPU-Expensive function gets called repeatedly due to re-renders of a component, which can lead to slow rendering. useMemo( ) hook can be used to cache such functions. By using useMemo( ), the CPU-Expensive function gets called only when it is needed.

Using React.PureComponent -

It is a base component class that checks the state and props of a component to know whether the component should be updated.

Instead of using the simple React.Component, we can use React.PureComponent to reduce the re-renders of a component unnecessarily.

Lazy Loading -

used to reduce the load time of a React app. Lazy loading reduces the risk of poor web app performance..

Explain keys in reacts

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

Error boundaries

React 16 introduces a new concept to handle the errors by using the error boundaries. Now, if any JavaScript error found in a part of the UI, it does not break the whole app.

Explain Strict mode in react js

Verify that the components inside are following some of the recommended practices and warn you if not in the console

What is “Three dot operator “ ?

allows us to quickly copy all or part of an existing array or object into another array or object. Curly brackets aren’t required if only one expression is present

Arrow function

is one of the features introduced in the ES6 version of JavaScript. It allows you to create functions in a cleaner way compared to regular functions.

Life cycle

• Initial Phase
• Mounting Phase
• Updating Phase
• Unmounting Phase

Initial Phase

In this phase, a component contains the default Props and initial State.it having the following methods like

getDefaultProps()

It is used to specify the default value of this.props.

getInitialState()

It is used to specify the default value of this.state.

Mounting Phase

In this phase, the instance of a component is created and inserted into the DOM. It consists of the following methods.

componentWillMount()

This is invoked immediately before a component gets rendered into the DOM.

componentDidMount()

This is invoked immediately after a 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.

Updating Phase

Here, we get new Props and change State. This phase also allows to handle user interaction and provide communication with the components hierarchy. This phase consists

componentWillRecieveProps()

It is invoked when a component receives new props.

shouldComponentUpdate()

It is invoked when a component decides any changes/updation to the DOM.

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.

componentDidUpdate()

It is invoked immediately after the component updating occurs.

Unmounting Phase

It is the final phase of the react component lifecycle. It is called when a component instance is destroyed and unmounted from the DOM. This phase contains only one method and is given below.

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.

Virtual DOM

For example, instead of creating an actual DIV element containing a UL element, it creates a React.div object that contains a React.ul object. It can manipulate these objects very quickly without actually touching the real DOM or going through the DOM API. Then, when it renders a component, it uses this virtual DOM to figure out what it needs to do with the real DOM to get the two trees to match.

Difference between virtual dom and real dom

Real DOM

• 1. It updates slow.
• 2. Can directly update HTML.
• 3. Creates a new DOM if element updates.
• 4. DOM manipulation is very expensive.
• 5. Too much of memory wastage.

Virtual DOM

• 1. It updates faster.
• 2. Can’t directly update HTML.
• 3. Updates the JSX if element updates.
• 4. DOM manipulation is very easy.
• 5. No memory wastage.

What is event

An event is an action that could be triggered as a result of the user action or system generated event. For example, a mouse click, loading of a web page, pressing a key, window resizes, and other interactions are called events.

Event loop

JavaScript has a runtime model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks

How do you define event in react ?

An event is an action that could be triggered as a result of the user action or system generated event. For example, a mouse click, loading of a web page, pressing a key, window resizes, and other interactions are called events.

What is the purpose of render() in React.

React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component then they must be grouped together inside one enclosing tag such as

<form>, <group>, <div>

Automatic re rendering

React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.

What is React?

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

features of React

• It uses the virtual DOM instead of the real DOM.
• It uses server-side rendering.
• It follows uni-directional data flow or data binding.

advantages of React

• It increases the application’s performance
• It can be conveniently used on the client as well as server side
• Because of JSX, code’s readability increases
• React is easy to integrate with other frameworks like Meteor, Angular, etcUsing React,
• writing UI test cases become extremely easy

limitations of React

React is just a library, not a full-blown frameworkIts library is very large and takes time to understandIt can be little difficult for the novice programmers to understandCoding gets complex as it uses inline templating and JSX