React Core Concepts

Question 1

Components

Answer 1

Components are like building blocks for your app.
Each component is a small, reusable piece of your user interface (UI), like a button or a form.

Question 2

Functional Components

Answer 2

These are simple functions that return what the UI should look like.

Question 3

Class Components

Answer 3

These are a bit more complex and used to be the main way to create components, but now we often use functional components.

Question 4

JSX (JavaScript XML)

Answer 4

JSX is a special syntax that looks like HTML but is used in JavaScript. It makes it easier to create and understand the structure of your UI.

Question 5

Props (Properties)

Answer 5

Props are inputs passed from a parent component to a child component. They are read-only and used to pass data or functions to components.

Question 6

Props usage

Answer 6

Props allow components to be dynamic and flexible, as they can change based on the parent’s state or data.

Question 7

State

Answer 7

State is an object that holds data that may change over time and affect how the component renders.

Question 8

State usage

Answer 8

Each component can manage its own state (especially with theuseStatehook in functional components) and re-render when the state changes.

Question 9

Hooks

Answer 9

Hooks are functions that allow you to manage state and side effects in functional components.

Introduced in React 16.8, they remove the need for class components in many cases.

Question 10

useState

Answer 10

Manages local state in functional components.

Question 11

useEffect

Answer 11

Handles side effects like data fetching or updating the DOM.

Question 12

useContext

Answer 12

Accesses context values without passing props through every level of the tree.

Question 13

useReducer

Answer 13

Manages complex state logic, similar to Redux’s reducer concept.

Question 14

Common Hooks

Answer 14

• useState
• useEffect

Question 15

Virtual DOM

Answer 15

The Virtual DOM is a lightweight copy of the real DOM.
React uses the Virtual DOM to keep track of changes and update only the parts of the actual DOM that need to be re-rendered.

Question 16

Virtual DOM usage

Answer 16

This makes React applications more efficient by minimising direct DOM manipulation.

Question 17

Lifecycle Methods (in Class Components)

Answer 17

Lifecycle methods are special methods in class components that are called at specific points in a component’s life (e.g., when it is created, updated, or destroyed).

Note: With hooks likeuseEffect, lifecycle methods in functional components are often replaced.

Question 18

componentDidMount()

Answer 18

Runs after the component is first rendered.

Question 19

Examples of Lifecycle Methods

Answer 19

• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()

Question 20

componentDidUpdate()

Answer 20

Runs after the component updates.

Question 21

componentWillUnmount()

Answer 21

Runs just before the component is removed from the DOM.

Question 22

Context and its usage

Answer 22

Context allows you to pass data through the component tree without manually passing props down through each level.
It is useful for global data like user authentication status or theme.

You useReact.createContext()to create a context, and components can access it with theuseContexthook or by subscribing to it.

Question 23

Conditional Rendering

Answer 23

Conditional rendering refers to rendering different components or UI elements based on certain conditions (e.g., whether a user is logged in).

Question 24

Conditional Rendering usage

Answer 24

This is typically achieved using JavaScript’s ternary operators or logical operators directly within JSX.

Question 25

Lists and Keys

Answer 25

When rendering lists of data in React, each list item should have a unique “key” prop. This helps React track which items have changed, been added, or removed, improving performance.

Question 26

Lists and Keys usage

Answer 26

Amap()function is commonly used to render lists in React, with each element given a unique key.

Question 27

Events

Answer 27

Events are actions that happen in the app, like clicking a button or typing in a field. You can attach functions to these events to run specific code when they happen.

Event handling in React is similar to native JavaScript, but events are named using camelCase (onClick,onChange, etc.) and use JSX to pass the event handler function.

Question 28

Events usage

Answer 28

Event handlers are passed as props to elements, and the function can be used to update the component’s state.

Question 29

Lifting State Up

Answer 29

Lifting state up refers to moving shared state to the closest common ancestor of the components that need it. This allows multiple components to access and modify the same piece of state.

Question 30

Fragment and usage

Answer 30

React fragments let you group a list of children without adding extra nodes to the DOM. It helps in reducing unnecessary markup.

<> … </>or<React.Fragment> ... </React.Fragment>.