When you want to access the current value of a context, you would use the ________ method of the context object in class components.
- this.context()
- this.get()
- this.getContext()
- this.getCurrentContext()
When you want to access the current value of a context in class components, you would use the this.context() method of the context object. This method allows you to access the context's current value within the component where the context is consumed.
The Redux principle that states all state updates are centralized and occur one by one in a strict order is known as ________.
- Immutable State
- One-Way Flow
- Reducer Composition
- Single Source of Truth
The Redux principle that states all state updates are centralized and occur one by one in a strict order is known as the "Single Source of Truth." This principle ensures that there's only one place (the Redux store) where the application's state is managed, and updates are processed sequentially. It's a key concept that helps maintain predictability and reliability in Redux applications.
What is the primary role of a reducer in Redux?
- Controlling the UI components.
- Handling HTTP requests.
- Managing the application's state.
- Validating user input.
A reducer's primary role in Redux is to manage the application's state. Reducers are responsible for specifying how the application's state changes in response to actions. They take the current state and an action as input and return a new state. While other components like middleware may handle HTTP requests or UI components control the user interface, reducers are specifically designed for state management.
You're reviewing a junior developer's code and notice they're using regular HTML tags in a React component. What might be a concern?
- Compatibility issues between browsers may arise.
- It has no impact on the application as React can handle both HTML and JSX.
- It simplifies code readability and maintenance.
- This approach improves React component performance.
The use of regular HTML tags within a React component can lead to compatibility issues between browsers. React relies on its virtual DOM to efficiently update the UI, and mixing regular HTML tags can break this process. While React can handle both HTML and JSX, it's recommended to stick with JSX to ensure optimal performance and compatibility across browsers.
When testing React components, ________ is a utility provided by the React Testing Library to render components.
- renderComponent
- testComponent
- createComponent
- mountComponent
When testing React components, the React Testing Library provides the renderComponent utility to render components for testing. This utility allows you to simulate component rendering and interactions in a testing environment. The other options are not standard utilities provided by the React Testing Library.
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.
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 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.
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.
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.
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.
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.