How do you restrict a prop to have values from a specific string literal union using TypeScript?
- By using TypeScript's StringLiteral type.
- By using TypeScript's Enum type.
- By defining a custom type with specific string values.
- You cannot restrict props to a specific string literal union in TypeScript.
To restrict a prop to have values from a specific string literal union using TypeScript, you can achieve this by defining a custom type with specific string values. This allows you to create a type that represents only the allowable string values for the prop. The other options mentioned are not standard practices for restricting props to specific string literal unions in TypeScript.
When querying a GraphQL server, the shape of the response is determined by the ________.
- client
- query
- request
- server
When querying a GraphQL server, the shape of the response is determined by the 'query'. The query you send to the server specifies exactly what data you want in the response. The server then responds with data in the shape of the query, providing only the requested data fields. The 'query' is a fundamental concept in GraphQL and plays a central role in shaping the responses.
To enforce that state changes can only occur inside actions, you can use MobX's ________ mode.
- mutable
- observable
- reaction
- strict
To enforce that state changes can only occur inside actions, you can use MobX's strict mode. In strict mode, MobX will throw an error if you attempt to modify observables outside of actions. This helps maintain a clear and controlled state management flow in MobX applications, preventing accidental or unexpected state mutations.
In the context of React, what are CSS Modules primarily used for?
- Writing inline CSS styles within JSX elements.
- Modularizing and scoping CSS styles.
- Adding global CSS styles to the entire application.
- Importing external CSS libraries.
CSS Modules in React are primarily used for modularizing and scoping CSS styles. They allow you to create local CSS scopes for your components, preventing style clashes and making it easier to manage CSS in large applications. The other options describe different ways of dealing with CSS in React, but they do not specifically address the primary purpose of CSS Modules.
How do you embed a JavaScript expression inside JSX?
- Place it in double curly braces like {{}}.
- Enclose it in angle brackets <>.
- Wrap it in single curly braces {}.
- Use backticks like ${}.
To embed a JavaScript expression inside JSX, you wrap the expression in single curly braces {}. This syntax allows you to inject dynamic values or JavaScript logic into your JSX code. The other options are not the correct way to embed JavaScript expressions in JSX.
The ________ client in React allows for fetching, caching, and synchronizing data in a GraphQL API.
- Apollo
- GraphQL
- REST
- Redux
The correct answer is "Apollo." Apollo Client is a popular GraphQL client for React that provides tools for fetching, caching, and synchronizing data from a GraphQL API. It simplifies the process of working with GraphQL in React applications, making it a powerful choice for managing data.
In which scenario is Redux typically considered overkill?
- Handling simple, local component state.
- Managing a large and complex application.
- Needing time-travel debugging capabilities.
- When multiple components require the same state.
Redux is typically considered overkill when you're dealing with simple, local component state that doesn't need to be shared across many components. Redux is powerful for managing complex application-wide states but introduces significant boilerplate code. For simple state management, React's built-in state or the Context API can be more efficient and easier to implement.
For a component that should render different content based on a prop's value, which TypeScript feature can help you model such prop variations?
- Union types.
- Intersection types.
- Ternary operators.
- Template literals.
To model prop variations in TypeScript for a component that renders different content based on a prop's value, you can use union types. This allows you to define a prop type that can accept multiple possible values, each corresponding to a different content rendering scenario. Option 2, intersection types, are not typically used for this purpose, and options 3 and 4 are unrelated to TypeScript's type modeling capabilities.
You are working on a React project and receive feedback about performance issues. You decide to profile the app. While analyzing the flame graph in React DevTools, you notice wide bars. What do these wide bars generally indicate?
- Asynchronous rendering in React.
- Blocked JavaScript execution.
- Deep component nesting.
- Frequent component re-renders.
Wide bars in a flame graph within React DevTools generally indicate frequent component re-renders. This means that certain components are being re-rendered often, which can lead to performance issues. It's essential to identify and address the causes of frequent re-renders to improve the app's performance.
When considering the performance of a React application, why might you choose a cache-first approach over a network-first approach?
- To ensure the latest version of assets is always used.
- To increase server load for better load balancing.
- To prioritize real-time data updates.
- To reduce latency and minimize network requests.
Choosing a cache-first approach in a React application can reduce latency and minimize network requests. By serving assets from a local cache before attempting to fetch them from the network, you can significantly improve load times, especially for returning users. While a network-first approach may be suitable for real-time data, a cache-first approach is ideal for performance optimization.