React

Question 1

What does the constructor method do ?

Answer 1

This method is called when the component is first created, and is used to initialize state, bind event handlers, and perform other setup tasks.

Question 2

Which React component phase includes the invoking of the constructor function ?

Answer 2

Mounting

Question 3

getDerivedStateFromProps(props, state)

Answer 3

This method is called every time a component is re-rendered, and is used to update the component state based on changes to the props.

Question 4

Which phase includes invoking of getDerivedStateFromProps(props, state)

Answer 4

Mounting and Updating

Question 5

Which react component phase includes invoking of the render function ?

Answer 5

Mounting and Updating

Question 6

Which react component phase includes invoking of the componentDidMount method ?

Answer 6

Mounting

Question 7

purpose of the render method ?

Answer 7

This method is called every time a component needs to be rendered, and returns the JSX to be rendered to the DOM.

Question 8

purpose of component did mount method ?

Answer 8

This method is called immediately after the component is inserted into the DOM, and is used to perform any setup tasks that require access to the DOM, such as initializing third-party libraries or setting up event listeners.

Question 9

What happens in the Mounting Phase of a React component ?

Answer 9

Mounting phase: These methods are called when an instance of a component is being created and inserted into the DOM.
- constructor()
- getDerivedStateFromProps(props, state)
- render()
- componentDidMount()

Question 10

purpose of shouldComponentUpdate(nextProps, nextState):

Answer 10

This method is called before a component is re-rendered, and can be used to prevent unnecessary re-renders by returning false.

Question 11

purpose of getSnapshotBeforeUpdate(prevProps, prevState):?

Answer 11

This method is called immediately before a component is re-rendered, and can be used to capture some information from the DOM (such as scroll position) before it is updated.

Question 12

purpose of componentDidUpdate(prevProps, prevState, snapshot) ?

Answer 12

This method is called immediately after a component is re-rendered, and is used to perform any necessary cleanup or additional setup tasks.

Question 13

What happens in the Updating Phase ? Which methods are called / invoked ?

Answer 13

These methods are called when a component is being re-rendered due to changes in its props or state.
* getDerivedStateFromProps(props, state):
* shouldComponentUpdate(nextProps, nextState):
* render():
* getSnapshotBeforeUpdate(prevProps, prevState):
* componentDidUpdate(prevProps, prevState, snapshot):

Question 14

purpose of componentWillUnmount() ?

Answer 14

This method is called just before a component is removed from the DOM, and is used to perform any necessary cleanup tasks, such as removing event listeners or canceling network requests.

Question 15

What happens in the unmounting phase ?

Answer 15

Unmounting phase: This method is called when a component is being removed from the DOM.
—- componentWillUnmount()

Question 16

purpose of useEffect Hooks

Answer 16

to handle side effects in functional components

Question 17

What are the two arguements that the useEffect hook takes in ?

Answer 17

a function that represents the side effect to be performed, and an array of dependencies that determine when the effect should be executed.

Question 18

When will the useEffect Hook get executed ?

Answer 18

after the component is rendered and whenever any of the dependencies in the second argument change.

Question 19

What would happen if you omit the second argument to the useEffect Hook ?

Answer 19

the effect will be executed after every render.

Question 20

Which lifecycle methods will the useEffect hook correspond to ?

Answer 20

the componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods in class components.

Question 21

How does the useEffect hook undergo the componentDidMount lifecycle method ?

Answer 21

When the component is first mounted, the effect function is executed after the first render.

Question 22

How does the useEffect hook undergo the componentDidUpdate lifecycle method ?

Answer 22

When the component updates, the effect is executed again if any of the dependencies have changed.

Question 23

How does the useEffect hook undergo the componentWillUnmount lifecycle method ?

Answer 23

when the component is unmounted, the effect’s cleanup function is executed.

Question 24

How does the useEffect support a cleanup function ?

Answer 24

useEffect also supports a cleanup function that allows developers to clean up any resources that were created by the effect. This function is returned from the effect function and is executed when the component unmounts or when the effect is re-executed due to a change in the dependencies.

Question 25

What are error boundaries ?

Answer 25

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

Question 26

How would you define an error boundary ?

Answer 26

To create an error boundary component, you need to define the componentDidCatch lifecycle method.

Question 27

What is the purpose of react error handling APIs ?

Answer 27

React also provides a set of error handling APIs that can be used to handle errors that occur during rendering or other lifecycle methods.

Question 28

which lifecycle methods can use the react error handling APIs?

Answer 28

getDerivedStateFromError, componentDidCatch, and setState to update component state based on the error.

Question 29

What features fo third-party error handling tools provide in the context of react ?

Answer 29

These tools can provide detailed information about the error, such as the stack trace and environment variables, to help you diagnose and fix the issue quickly.

Question 30

Name 3 third-party error tracking tools

Answer 30

Sentry, Rollbar, or Bugsnag

Question 31

Enlist 4 ways of handling errors in your react application

Answer 31

• Error Boundaries:
• try-catch blocks:
• React Error Handling API:
• Third-party error tracking tools:

Question 32

If you have large amount of data in a react application, what are some strategies that can be deployed to optimize the performance of such an application ?

Answer 32

When dealing with large amounts of data in a React application, it’s important to optimize the performance of your code to ensure that it remains fast and responsive for your users. Here are a few tips on how to do this:
1. Use pagination or infinite scrolling: Instead of rendering all of your data at once, consider using pagination or infinite scrolling to load data incrementally as needed. This can help to reduce the amount of data that needs to be processed and rendered at any given time.
2. Use virtualization: Virtualization is a technique where only the visible portion of a large list or table is rendered, while the rest is stored in memory or on disk. This can help to reduce the amount of data that needs to be processed and can improve the overall performance of your application.
3. Use memoization and pure components: Memoization and pure components can help to reduce the number of re-renders that occur when data changes. By only re-rendering the components that actually need to be updated, you can reduce the overall workload of your application and improve its performance.
4. Avoid unnecessary calculations: Make sure that your code is only performing necessary calculations and operations. This can be achieved by avoiding unnecessary state updates, optimizing algorithms, and reducing the complexity of your code.
5. Use Web Workers: Web Workers are a way to run background tasks in a separate thread, which can help to reduce the workload of your main thread and improve the overall performance of your application.
6. Use the React Profiler: The React Profiler is a tool that allows you to measure the performance of your React components and identify areas that need optimization. By using this tool, you can identify performance bottlenecks and make targeted optimizations to improve the overall performance of your application.
7. Lazy loading images in React - To optimize an application that consists of several images, we can avoid rendering all of the images at once to improve the page load time. With lazy loading, we can wait until each of the images is about to appear in the viewport before we render them in the DOM.
8. Code-splitting in React using dynamic import() - Code-splitting is another important optimization technique for a React application. By default, when a React application renders in a browser, a “bundle” file containing the entire application code loads and serves to users at once. This file is generated by merging all the code files needed to make a web application work.
By implementing these techniques, you can help to ensure that your React application remains fast and responsive even when dealing with large amounts of data.