Context best practices in React - Cheat Sheet & Quick Revision

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.

intermediate

Why should you avoid putting large or frequently changing data in Context?

Putting large or frequently changing data in Context can cause unnecessary re-renders of all components consuming that context, which can hurt performance. It's better to keep Context for stable, global data.

intermediate

How can you optimize Context usage to prevent unnecessary re-renders?

You can optimize by splitting Context into smaller, focused contexts, memoizing context values with useMemo, and avoiding passing new object or function references unless needed.

beginner

What is a good practice when naming Context providers and consumers?

Use clear and descriptive names for Context and its Provider, like ThemeContext and ThemeProvider. This makes code easier to read and understand.

beginner

When should you consider using Context over props?

Use Context when you need to share data that many components need, especially deeply nested ones, and when passing props through many layers becomes cumbersome.

What problem does React Context primarily solve?

A Improving CSS styling

B Avoiding prop drilling

C Handling HTTP requests

D Managing component lifecycle

React Context helps avoid prop drilling by allowing data to be shared without passing props through every component.

Which of these is a best practice when using React Context?

A Put all app state in one big Context

B Use Context only for styling

C Never memoize context values

D Split Context into smaller focused parts

Splitting Context into smaller parts helps optimize performance and keeps code organized.

What can cause unnecessary re-renders when using Context?

A Passing new object references every render

B Memoizing context values

C Passing stable primitive values

D Using useContext hook

Passing new object or function references causes consumers to re-render even if data is unchanged.

When is it better to use props instead of Context?

A When data is only needed by a few components nearby

B When data is global

C When data changes frequently

D When data is needed by many nested components

Props are simpler and better when data is only needed by nearby components.

What naming convention is recommended for Context providers?

A Use generic names like Provider

B Use lowercase names

C Use descriptive names like ThemeProvider

D Use numbers in names

Descriptive names improve code readability and understanding.

Explain why and how you would split React Context into smaller parts.

Think about performance and clarity.

Describe the difference between using props and Context for passing data in React.

Consider component depth and data scope.