React - Basic

Question 1

What are the key features of React.js?

Answer 1

1. a virtual DOM for efficient rendering,
2. component-based architecture,
3. JSX syntax for defining components,
4. and unidirectional data flow.

Question 2

What is unidirectional data flow in react?

Answer 2

• Data flows only 1 way from parent to child using props
• If a child needs to change the state it does so via a callback passed down by the parent.
• Using the callback will update the parent components state and cause the parent and subsequent child components to re-render.

Question 3

What is JSX?

Answer 3

-A syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files.

Question 4

Explain the concept of virtual DOM in React.js.

Answer 4

A lightweight copy of the real DOM which allows React to efficiently update and render only the necessary components when there are changes

Question 5

What is a functional component

Answer 5

JavaScript functions that receive props as input and return JSX elements as output.

Question 6

What are class components

Answer 6

Now are considered a little bit out dated compared to functional components. They extend the React.Component class and have the lifecycle methods.

Question 7

What is the purpose of state in React?

Answer 7

• State is used to store and manage data that can change over time within a component.

Question 8

How do you update state in React?

Answer 8

• You should never update state directly.
• Functional components should use the useState react hook’s setter method to updated the state.
• Class components should use the setState() method to update state.

Question 9

What are controlled components in React?

Answer 9

• Where the values of form elements are controlled by React state.

Question 10

What is the significance of keys in React lists?

Answer 10

Used to help React uniquely identify and differentiate between elements in an array of components.

Question 11

What is React Router?

Answer 11

• A popular routing library for React applications.
• It allows you to define different routes and their corresponding components, enabling navigation and rendering different components based on the URL

Question 12

What is the purpose of the useEffect hook in React?

Answer 12

• The useEffect hook is used to perform side effects in functional components such as making API calls.

Question 13

What is the purpose of the useContext hook?

Answer 13

• It provides a way to access values that are globally available to all components within a specific context.

Question 14

What is the purpose of the useCallback hook?

Answer 14

• Used to return memoized versions of functions in React so that a function is only reloaded when one of the useCallback dependencies has changed.

Question 15

What is the purpose of the useRef hook?

Answer 15

Allows you to create a mutable reference that persists across renders and doesn’t cause a re-render when it’s value changes.

It is commonly used to access or store DOM elements without triggering a re-render.

Question 16

What is the significance of the Fragment component in React?

Answer 16

• It is a built-in component provided by React.
• It allows you to group multiple elements without adding an extra DOM element.
• It helps in avoiding unnecessary wrappers in the component hierarchy.

Question 17

How can you optimize performance in React applications?

Answer 17

1. Using key props correctly,
2. implementing shouldComponentUpdate or React.memo / React.useCallback,
3. code splitting using import with React.lazy (Lazy loading a component only when it’s needed),
4. using production builds,

Question 18

Explain the concept of React Hooks.

Answer 18

Functions that make it possible to use state and handle side effects in Functional Components in place of Class Components.

Question 19

What is Redux?

Answer 19

A state management library for JavaScript applications. .

Question 20

What are React Portals?

Answer 20

• Provide a way to render a component like a Modal in a different part of the DOM tree outside of the parent component’s hierarchy using the createPoral function that recieves the JSX that you’d like to render and the element that you’d like to be the parent of the JSX.

Question 21

How can you handle errors in React?

Answer 21

This is something that is easier to do with Class Components because functional components cannot capture errors during rendering.

You create something called an ErrorBoundary class that wraps a component and then use the getDerivedStateFromError and componentDidCatch lifecycle methods to essentially catch any errors that occure with that components hierarchy.

This limits the impact of those errors so that the whole application doesn’t fail.

Question 22

What are Higher-Order Components (HOCs) in React?

Answer 22

They take a component as a prop input, they wrap that component in reusable functionality and return it as a now enhanced component.

Question 23

How can you handle events in React?

Answer 23

attaching event handlers such as onClick, to JSX elements.

Question 24

How do “keys” help React to more efficiently render lists of components?

Answer 24

When the state or props change, react will compare the new list of keys to the old list and determine the differences so as to minimize unnecessary re-renders.

Question 25

How do “keys” help react to preserve component state?

Answer 25

They help react to understand which components have changed, been added or removed.