Deck 3 Flashcards
What is the lifecycle in React?
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.
What is a Higher-Order Component?
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.
What is the difference between useMemo and React.memo?
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.
What is a memory leak?
: 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.
What is the dynamic index in TypeScript?
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.
What is the grid system in CSS?
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.
What is lifting state up in React?
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.
What is a custom hook in React.js?
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
What is the difference between null and undefined? ❓
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.
What is the output of [] == []?
: 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.
What are Primitive Types and Union Types?
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.
How does JavaScript handle memory?
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.
What are React hooks?
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.
How does the Virtual DOM work?
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.
How does the Event Loop work in JavaScript?
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.
What are the ways to manage state in a React application?
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.
What are the two algorithms that React is built on?
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.
What are the different ways to fetch data in React JS?
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.
Different Ways To Fetch Data in React JS
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.
You have 10 minutes to explain all 5 SOLID principles to me.
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.
Why Can’t We Rely on Vanilla JavaScript for Modern Web Apps?
When building modern web applications, vanilla JavaScript often falls
Here’s two most important reasons :
- Direct DOM Manipulation: This imperative approach leads to messy, unstructured code — often referred to as “🍝 spaghetti code.” It becomes harder to maintain and scale as the app grows.
- State Management: In vanilla JS, data (or state) is typically stored directly in the DOM (within the HTML itself). This scattered approach can lead to bugs since state is shared across the entire app, making it difficult to manage and track changes.
For scalable, maintainable apps, frameworks like React, Angular, or Vue provide better structure and centralized state management, making development smoother.
