React.js

Question 1

What is React and it’s key features?

Answer 1

A javascript library for building user interfaces.

Key features: virtual DOM, reusable components, unidirectional data flow

Question 2

What is the React Virtual DOM and how does it work?

Answer 2

A virtual representation of a UI that is kept in memory after the initial render

Any changes are first made to the virtual DOM, then synchronized with the ‘real’ DOM in an efficient way (reconciliation)

Improves performance by only updating the parts that have changed

Question 3

Describe unidirectional data flow

Answer 3

Data has a single, clear direction of movement throughout the application.

Ensures a predictable and easier-to-understand flow of data, making the application more maintainable and less prone to bugs.

Data Down - data is passed from parent to child

Action up - child doesn’t directly modify the state of its parent; instead, it informs the parent about the desired change

Question 4

Explain JSX syntax

Answer 4

JSX is a syntax extension for javascript, allowing XML code

Facilitates the creation of react elements in a concise and readable manner

Question 5

How does React handle data binding?

Answer 5

React uses one-way data binding - where any changes to the data trigger re-renders

Question 6

What are React props?

Answer 6

Properties - inputs to components, allowing the passing of data from parent to child

Question 7

Explain state in React

Answer 7

An internal data storage mechanism in React components, when the state changes the component re-renders

Question 8

Why use key attribute in React lists?

Answer 8

Facilitates efficient updates by identifying which items have changed, been added, or removed.

Question 9

Controlled vs Uncontrolled

Answer 9

Controlled
* state is controlled by react
* Using useState to manage an input value in order to do something else with it

Uncontrolled
* state is managed by the DOM
*Using useRef to track an input value but doing nothing with it in state

Question 10

Significance of React Hooks?

Answer 10

Functions (built-in or custom) that allow functional components to use state and lifecycle features

Question 11

Describe some built-in React Hooks

Answer 11

useState - manage local state.

useEffect - side effects like data fetching, subscriptions, or manually changing the DOM

useMemo - prevents unnecessary recalculations in functional components.

useContext - consume values from the React context without wrapping the component in a context consumer

useReducer - alternative to useState for managing more complex state logic. It is particularly useful when the next state depends on the previous state.

Question 12

Explain the lifecycle method in a React component

Answer 12

1. Mounting - component is created & inserted into the DOM
2. Updating - component is re-rendered as a result of changes in props or state
3. Unmounting - component is being removed from the DOM

Question 13

Purpose of React Router?

Answer 13

Simplifies navigation in single-page applications by providing a set of components and hooks to manage routing and rendering based on the current URL

Question 14

What is Redux?

Answer 14

State management library for larger JS applications

Question 15

What is React Context?

Answer 15

Provides a way to pass data through the component tree without having to pass props manually at every level

Commonly used with themes, user authentication status, or any other global state across a React component tree

Question 16

Explain HOC - Higher Order Components

Answer 16

Functions that take a component and return a new component with enhanced features, enabling code reuse and logic sharing

Question 17

How does Error Handling work in React

Answer 17

Error boundaries catch JS errors anywhere in the component tree using the componentDidCatch method

Question 18

What are Fragments in React?

Answer 18

Used to group multiple elements without introducing an additional parent element to the DOM

<></> uses empty angle brackets

Question 19

Explain reconciliation in React?

Answer 19

The process by which React updates the DOM to match the virtual DOM efficiently

Question 20

Explain how PropTypes work

Answer 20

Enforces the type of props passed to a component, providing runtime validation and documentation

Question 21

What are Portals?

Answer 21

Allow rendering children into a DOM element that exists outside of the parent component

Question 22

Function vs Class Components

Answer 22

Function - simple, stateless components introduced in React 16.8

Class - traditional, ES6 classes with state and lifecycle methods

Question 23

Explain Memoization

Answer 23

Optimizing expensive function components by caching the result of a computation based on it’s inputs

For example, when displaying text to the user as they type into an input

Question 24

How does Event Handling work

Answer 24

Attach event handlers using camelCase naming conventions (like onClick and onChange)

Treated as functions, allowing you to pass additional parameters and define custom behavior

Question 25

How does React handle Forms and Controlled components?

Answer 25

Controlled components manage form state through state, and update the UI based on changes in the components state

Question 26

Explain code-splitting

Answer 26

Breaking down a large chunk of JS code into smaller chunks and loading them on demand to enhance performance

Question 27

Explain how Server-Side Rendering works

Answer 27

The browser sends a request to the server, which executes the component code, creating a virtual DOM, and generating HTML

The fully rendered HTML is sent back to the client

Pros: Improves performance, SEO friendly
Cons: State management, Increased server load

Question 28

What are React Hook rules and why are they important?

Answer 28

1. Only call them at the top level of functional components
2. Do not use them inside loops or conditions.

Following these rules ensures the correct behavior of Hooks

Question 29

What is React Flow?

Answer 29

Flow allows us to add type annotations to our code, specifying the types of variables, function arguments, and return values.

This helps catch type-related errors early in the development process before the code is even run.

Question 30

How does React handle XXS (Cross-Site Scripting)

Answer 30

By using JSX to render content securely, preventing injection attacks by automatically escaping values before rendering.