React Interview Q's Flashcards

Question

What exactly is the dispatcher?

Answer 1

It is the central hub of data flow in a Flux application that acts as a directory of callbacks.

Answer 2

It is called when setState () has finished. A state can be updated in response to prop changes or server response using setState() method The main purpose is to prevent a component from re-rendering.

Answer 3

It is an object which stores the component’s property values. Also, it decides how the component renders and behaves.

Answer 4

Yes, it can be updated directly or indirectly. To implement this one can use either this. setState function or the updater function.

Answer 5

Arrow function helps to create a compact function expression. Also they help predict bugs when passed as a callback.

Answer 6

The steps are as follows: Initialization State/Property updates Destruction

Answer 7

They are used to render an element outside its hierarchy using CreatePortalmethod. Hence they allow developers to render outside the hierarchy tree.

Answer 8

React Context is a way to share data globally between React components. It achieved this by passing props from parent to child and storing them in a store. Thus child component(s) can use these props through the store.

Answer 9

Webpack is a command line tool used to bundle different code files and assets into single large file.. It has been built over Node.js and helps minimize Javascript, CSS files, images, etc.

Answer 10

It is an open-source JavaScript compiler that converts the latest JavaScript versions to old ones.

Answer 11

Where ReactJS is a front end open-source JavaScript library for UIs, React Native is an open-source mobile framework for platforms such as Android and iOS.

Answer 12

As JSX is a combination of HTML and JavaScript, browsers are unable to read it. And hence a transpiler is needed to convert JSX to Javascript so that browsers can understand.

Answer 13

By using reference rather than using displayName because it provides a clear and concise name for the component.

Answer 14

State is mutable while Props are immutable. This means that the state is internal and managed by the component while props are external and managed by anything that renders the component.

Answer 15

It provides a development environment for creating React applications using the JavaScript features as it creats a basic setup for the application without requiring to configure everything. It is very helpful in building a single-page application in React.

Answer 16

They help catch errors in child components, log the error and show fallback UI.

Answer 17

To declare fragments

Answer 18

Mixins are a way of defining code that can be reused in multiple class hierarchies. They are intended to provide member implementations en masse. To define a mixin, use the mixin declaration. In the rare case where you need to define both a mixin and a class, you can use the mixin class declaration. The advantage of mixins is that they can be used to simplify the design of APIs in which multiple interfaces need to include the same methods and properties.

Answer 19

React Query is a popular library for managing server state and caching in React applications. It provides hooks and utilities to fetch, cache, and update data from your server in a declarative and efficient way. Some key features of React Query include: 1. **Data Fetching**: React Query provides hooks like `useQuery` and `useMutation` to fetch and mutate data from your server. These hooks handle caching, stale-while-revalidate, and other optimizations out of the box. 2. **Automatic Caching**: It automatically caches query results in memory and supports various cache configurations to control caching behavior, including time-based invalidation and manual invalidation. 3. **Query Invalidation and Refetching**: React Query handles automatic invalidation and refetching of queries when data changes, ensuring that your UI stays up to date with the latest data from the server. 4. **Optimistic Updates**: It supports optimistic updates for mutations, allowing you to update the UI optimistically before receiving a response from the server, providing a smoother user experience. 5. **Pagination and Infinite Loading**: React Query includes built-in support for pagination and infinite loading, making it easy to implement efficient data fetching patterns in your application. 6. **Server-Side Rendering (SSR) Support**: It provides built-in support for server-side rendering (SSR) and seamless integration with popular SSR frameworks like Next.js. Overall, React Query simplifies the management of server state in React applications, reducing boilerplate code and improving performance by handling caching and data fetching optimizations for you.

Answer 20

The Context API in React is a mechanism for passing data through the component tree without having to pass props down manually at every level. It allows you to share values like themes, locale preferences, or authentication status across the entire React component tree. The Context API consists of two main parts: 1. **Context Provider**: The Context Provider component is used to wrap a part of the component tree where you want to make certain data available to all descendant components. It accepts a `value` prop which can be accessed by any child component that subscribes to the context. 2. **Context Consumer**: The Context Consumer component is used to consume the context value within a functional component. It allows components to access the context value without having to explicitly pass it down through props. Here's a basic example of how the Context API works: ```javascript // Create a new context const MyContext = React.createContext(); // Define a Context Provider function MyProvider({ children }) { const [value, setValue] = React.useState('defaultValue'); return ( {children} ); } // Define a component that consumes the context function MyComponent() { return ( {({ value, setValue }) => (

Value from context: {value}

)} ); } // Usage function App() { return ( ); } ``` In this example, `MyProvider` is the Context Provider, which wraps the `MyComponent`. `MyComponent` consumes the context value using the Context Consumer. When the button inside `MyComponent` is clicked, it updates the context value through the setter function provided by the context. All components within the provider will re-render with the updated value.