is passed the initial value. It returns an object with a Provider and a Consumer. • The Provider component is used higher in the tree and accepts a prop called value. This value can be anything! • The Consumer component is used anywhere below the Provider in the tree and accepts a prop called children and must be a function that can accept a value and return a JSX.
re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider’s parent re-renders. For example, the code above will re-render all consumers every time the Provider re-renders because a new object is always created for value: