Creating context in React - Quick Revision & Summary

Recall & Review

beginner

What is React Context used for?

React Context is used to share data across components without passing props manually at every level. It helps avoid 'prop drilling' by providing a way to pass data through the component tree.

beginner

How do you create a new Context in React?

You create a new Context by calling React.createContext(). This returns an object with Provider and Consumer components.

beginner

What is the role of the Context Provider?

The Provider component supplies the context value to its child components. Any component inside the Provider can access the shared data.

beginner

How do components consume context values in React?

Components can consume context values using the useContext hook or the Context.Consumer component.

intermediate

Why should you avoid updating context value too often?

Updating context value too often causes all consuming components to re-render, which can hurt performance. It's best to keep context values stable or memoized.

Which React function creates a new context?

A React.useContext()

B React.createContext()

C React.createProvider()

D React.useProvider()

React.createContext() creates a new context object with Provider and Consumer.

What component provides the context value to children?

A Context.Provider

B useContext

C Context.Consumer

D React.Fragment

Context.Provider wraps children and supplies the context value.

How do you access context value inside a functional component?

A Using useContext hook

B Using Context.Provider

C Using React.createContext()

D Using setState

useContext hook reads the current context value inside functional components.

What problem does React Context help solve?

A Managing component state locally

B Handling events

C Styling components

D Avoiding prop drilling

Context helps avoid passing props through many layers (prop drilling).

What happens if the context value changes?

A Only Provider re-renders

B React throws an error

C All consuming components re-render

D Nothing changes

All components using the context will re-render when the value changes.

Explain how to create and use React Context to share data between components.

Think about how to share data without passing props step-by-step.

Describe why and when you should use React Context instead of props.

Consider a family sharing a secret without telling everyone individually.