Recently Facebook has released the react 16.3 which bundled with a few awesome features including Context API and createRef(), I will talk abit about Context API since its quite hot topic.
Context API its a feature that allows you to pass your data down to all child levels without passing props around like what you used to do. Lets take below code as example and we will convert to use Context API.
as you can see the top level pass in a prop call “color” from Animal Component > Cat Component > Color Component then finally received the prop and output in DOM, its ok for one or 2 props, but when your application grows and required to handle more props or stats, its going to be painful, luckily we can declare only once in Context API and color should received the props as child.
So lets get started.
first we need to declare that we want to use Context API, so lets just create a Context API (sorry by the time I create this, codesandbox is not using react 16.3):
const AnimalContext = React.createContext(); // you can also add a default value inside createContext("your default value here")
AnimalContext comes with 2 component where we can use (Provider and Consumer) so the Provider will provide the data and Consumer will received the data, easy concept!
lets create our provider component and pass in the data.
const App = () => (