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.
How does JSX prevent injection attacks by default?
- It automatically escapes values embedded in JSX, making it safe.
- It doesn't prevent injection attacks; developers must do it manually.
- It relies on server-side filtering to sanitize input data.
- It uses a content security policy (CSP) to block malicious scripts.
JSX prevents injection attacks by default through automatic escaping. Any values embedded in JSX are automatically escaped, meaning that any potentially harmful content is treated as plain text and not executed as code. This makes it safe by default and reduces the risk of injection attacks. Server-side filtering and manual prevention are not JSX's default behavior for preventing injection attacks.
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.
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.
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.