Context API

My reading notes for Code Fellows


Context API

Context API**

What can React Context provide your app? Context provides a way to pass data through the component tree without having to pass props down manually at every level. In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

Why might we use Context? To avoid passing props through intermediate elements. Context is primarily used when some data needs to be accessible by many components at different nesting levels.

Why should we use it sparingly? It makes component reuse more difficult.

Consume content from (at least) two of the Awesome React Context links. Share your take-away from each:

Takeaway 1: import the { createContext } function from React,

import { createContext } from 'react';

Takeaway 2:

Context allows one to pass properties without needeing to drill down through multiple levels.