Deck 3

Question 1

What is the lifecycle in React?

Answer 1

The React lifecycle refers to the series of methods that are invoked at different stages of a component’s existence: mounting, updating, and unmounting. These methods include componentDidMount, componentDidUpdate, and componentWillUnmount.

Question 2

What is a Higher-Order Component?

Answer 2

A Higher-Order Component (HOC) is a function that takes a component and returns a new component with additional props or behavior. It’s used to reuse component logic, such as handling authentication or data fetching.

Question 3

What is the difference between useMemo and React.memo?

Answer 3

useMemo is a React hook that memoizes the result of a computation, while React.memo is a higher-order component that memoizes the entire component. useMemo optimizes specific calculations within a component, while React.memo prevents unnecessary re-renders of the entire component.

Question 4

What is a memory leak?

Answer 4

: A memory leak occurs when a program allocates memory but fails to release it after it’s no longer needed, leading to reduced performance over time. In React, this can happen if event listeners or intervals are not properly cleaned up.

Question 5

What is the dynamic index in TypeScript?

Answer 5

A dynamic index in TypeScript allows you to define an index signature in an object type, specifying that an object can have properties with keys of a certain type and values of a certain type, such as [key: string]: number.

Question 6

What is the grid system in CSS?

Answer 6

The grid system in CSS is a layout structure that divides a web page into rows and columns, allowing for precise control over the placement and alignment of elements. CSS Grid Layout and Flexbox are common techniques used.

Question 7

What is lifting state up in React?

Answer 7

Lifting state up in React refers to moving state from child components to a common parent component to manage shared state. This is done to allow sibling components to access and update the shared state.

Question 8

What is a custom hook in React.js?

Answer 8

A custom hook is a JavaScript function that uses one or more built-in React hooks (like useState or useEffect) to encapsulate and reuse logic across multiple components. It helps keep components clean and reusable

Question 9

What is the difference between null and undefined? ❓

Answer 9

null is an assigned value representing the intentional absence of any object value, while undefined means a variable has been declared but not yet assigned a value. Both are falsy values but used in different contexts.

Question 10

What is the output of [] == []?

Answer 10

: The output of [] == [] is false because in JavaScript, objects and arrays are compared by reference, not by value. Two different empty arrays are different objects in memory, so the comparison returns false.

Question 11

What are Primitive Types and Union Types?

Answer 11

Primitive types in TypeScript are the basic data types such as string, number, boolean, etc. Union types allow a variable to hold more than one type, e.g., string | number, meaning the variable can be a string or a number.

Question 12

How does JavaScript handle memory?

Answer 12

JavaScript handles memory automatically through a process called garbage collection, where the JavaScript engine frees up memory by removing objects that are no longer reachable or needed in the code.

Question 13

What are React hooks?

Answer 13

React Hooks are functions that let you use state, lifecycle methods, and other React features in functional components. Examples include useState, useEffect, useContext, useReducer, etc.

Question 14

How does the Virtual DOM work?

Answer 14

The Virtual DOM is a lightweight copy of the real DOM that React uses to efficiently update the UI. React compares the virtual DOM with the real DOM (reconciliation) and only makes necessary updates, improving performance.

Question 15

How does the Event Loop work in JavaScript?

Answer 15

The Event Loop is a mechanism in JavaScript that handles asynchronous operations. It continuously checks the call stack and the task queue, processing events and executing callbacks from the queue when the stack is empty.

Question 16

What are the ways to manage state in a React application?

Answer 16

State in a React application can be managed using useState for local state, useReducer for complex state, Context API for global state, and external libraries like Redux or MobX for more complex state management needs.

Question 17

What are the two algorithms that React is built on?

Answer 17

React is built on the “Reconciliation” algorithm, which efficiently updates the DOM, and the “Fiber” architecture, which improves rendering performance by breaking rendering work into chunks and allowing for updates to be interrupted.

Question 18

What are the different ways to fetch data in React JS?

Answer 18

A:

fetch() API: The native browser method to make network requests. You can use it with promises to handle asynchronous data fetching.

Axios: A popular library for making HTTP requests. It provides a more powerful and flexible API than fetch(), with features like request/response interceptors and automatic JSON parsing.

React Query: A data-fetching library that simplifies fetching, caching, and updating server data in React applications. It helps manage server state and reduces the need for manual data management.

SWR (Stale-While-Revalidate): A React Hooks library for data fetching that provides a simple and efficient way to fetch, cache, and revalidate data.

GraphQL with Apollo Client: A library for using GraphQL in React applications. It allows you to query your API and get only the data you need, making it efficient for complex data fetching.

useEffect Hook with Fetching Logic: You can use the useEffect hook to fetch data when a component mounts or when certain dependencies change, ensuring data is fetched at the right time.

Custom Hooks: You can create custom hooks that encapsulate data-fetching logic, making it reusable across multiple components.

Question 19

Different Ways To Fetch Data in React JS

Answer 19

fetch() API

Native browser method.
Works with promises.
2. Axios

Library for HTTP requests.
More powerful than fetch().
3. React Query

Manages fetching, caching, updating server data.
Simplifies server state management.
4. SWR (Stale-While-Revalidate)

React Hooks library for data fetching.
Efficient for fetching, caching, revalidating data.
5. GraphQL with Apollo Client

For querying APIs with GraphQL.
Fetches only the needed data.
6. useEffect Hook with Fetching Logic

Fetch data when component mounts or dependencies change.
7. Custom Hooks

Encapsulate fetching logic.
Reusable across components.

Question 20

You have 10 minutes to explain all 5 SOLID principles to me.

Answer 20

Single Responsibility Principle (SRP)

Definition: A class should have only one reason to change, meaning it should have only one job or responsibility.
Example: A class handling user authentication should not also manage user profiles.
2. Open/Closed Principle (OCP)

Definition: Software entities (classes, modules, functions, etc.) should be open for extension but closed for modification.
Example: Adding new features should be done by extending existing classes, not modifying them.
3. Liskov Substitution Principle (LSP)

Definition: Subtypes should be substitutable for their base types without altering the correctness of the program.
Example: If a function expects an object of a parent class, it should work correctly if an object of a derived class is passed.
4. Interface Segregation Principle (ISP)

Definition: Clients should not be forced to depend on interfaces they do not use.
Example: Instead of one large interface, create multiple smaller, specific ones so that implementing classes only need to fulfill relevant contracts.
5. Dependency Inversion Principle (DIP)

Definition: High-level modules should not depend on low-level modules. Both should depend on abstractions. Abstractions should not depend on details. Details should depend on abstractions.
Example: A high-level class (like a service) should depend on an interface (abstraction) rather than a concrete implementation (detail), allowing for easier swapping of implementations.