When using a key for your list items, what’s the best general choice?

<aside>

using an ID coming from the data that points to the DB ID

</aside>

Imagine you have a specification for rendering the following list item:

<li>Ice cream - 200 cal</li>, where the name and the number of calories are coming as dynamic data. List all the options that would correctly render the desired output.

<aside>

• <li>{item.name} - {item.cal} cal</li> → JSX syntax
• <li>{${item.name} = ${item.cal} cal}</li> → JSX syntax + string interpolation </aside>

Let’s suppose you have a list of two items and a new item is added to the list. From the point of view of the React diffing algorithm, which of the following is the best place for the new element to be added?

<aside>

the end of the list - prevents previous items from having to be re-rendered

</aside>

What are controlled components?

<aside>

set of components whose internal state is controlled by React → state is delegated from the DOM to React local state

</aside>

Which of the following can you achieve with uncontrolled components?

<aside>

• one time value retrieval on submit using a React ref → ref allows you to access internal state held by DOM
• validation on submit → ??? </aside>

When creating an API for context consumers via useContext, what’s the argument you have to provide to the useContext call?

<aside>

the React state that defined the global state to be injected

</aside>

Imagine the component structure below, where all components ComponentA, ComponentB and ComponentC are simple presentational components that hold no props or state:

const App = () => {
  return(
    <AppContext.Provider>
      <ComponentA />
    </AppContext.Provider>
  );
};

const ComponentA = React.memo(() => <ComponentB />);
const ComponentB = () => <ComponentC />;
const ComponentC = () => null;

If the App component re-rendered for whatever reason, what would be the sequence of component re-renders that would take place?

<aside>

• App re-renders.
• That causes AppContext.Provider to re-render (it’s part of App’s output).

Then React tries to re-render the Provider’s child:

• ComponentA will not re-render because it’s wrapped in React.memo and it receives no props, so its memo comparison sees “nothing changed”.

Because ComponentA doesn’t re-render, it does not re-run and therefore it does not recreate/render its child tree:

• ComponentB does not re-render
• ComponentC does not re-render

re-render sequence:

App → AppContext.Provider → (ComponentA skipped) → (ComponentB skipped) → (ComponentC skipped)

</aside>

Even though props and state are inherently different, which of the following are areas where they overlap?

<aside>

• both props and state are plain JS objects
• both props and state changes trigger a render update
• both props and state are deterministic, component always generates the same output for the same combination of props and state </aside>

When defining a JavaScript object as a piece of local React state that will be injected as context, what is the specific React hook that allows you to keep the same object reference in memory and prevent unnecessary re-renders if the object itself hasn’t changed any values?

<aside>

useMemo

</aside>

What are some possible examples of application features that are well suited to be defined as React context?

<aside>

• the application theme
• locale preferences
• current authenticated user </aside>