What’s new in React 16.3(.0-alpha) – Bartosz Szczeciński – Medium

What’s new in #React 16.3(.0-alpha) | @btmpl @Medium  #JavaScript #ReactJS

  • The new API is accessible as React.createContext() and creates two components for us: – Creation of the new context via React.createContextCalling the factory function will return us an object that has a “Provider” and a “Consumer” in it.
  • The “Provider” is a special component which aims to provide data to all components in its sub-tree, so one example of usage would be: – Usage of the new context API — Context.ProviderHere we select a sub-tree (in this case, the whole tree) to which we want to pass our “theme” context,…
  • Next step is to use the Consumer: – Usage of the new context API — Context.ConsumerIf you happen to render the “Consumer” without embeding it in a corresponding “Provider”, the default value declared at createContext call will be used.
  • Please notice some things: – the consumer must have access to the same Context component — if you were to create a new context, with the same parameter as input, a new Context would be created and the data would not be passed.
  • For this reason please consider Context a component — it should be created once and then exported + imported whenever neededthe new syntax uses the function as child (sometime called render prop) pattern — if you’re not familiar with this pattern I recommend reading some articles on itit is no longer required to use…

React 16.3-alpha just hit npmjs and can be downloaded and added to your project. What are the biggest, most interesting changes? Context API was always a thing of mystery — it’s an official…
Continue reading “What’s new in React 16.3(.0-alpha) – Bartosz Szczeciński – Medium”

What’s new in React 16.3(.0-alpha) – Bartosz Szczeciński – Medium

  • It is definitely more “user friendly” and might make your life a bit easier when all you want is simple state management without the “overhead” of Redux or MobX.The new API is accessible as React.createContext() and creates two components for us:Creation of the new context via React.createContextCalling the factory function…
  • Next step is to use the Consumer:Usage of the new context API — Context.ConsumerIf you happen to render the “Consumer” without embeding it in a corresponding “Provider”, the default value declared at createContext call will be used.Please notice some things:the consumer must have access to the same Context component — if you were to…
  • For this reason please consider Context a component — it should be created once and then exported + imported whenever neededthe new syntax uses the function as child (sometime called render prop) pattern — if you’re not familiar with this pattern I recommend reading some articles on itit is no longer required to use…
  • New life-cycle methodsThe other RFC to make it into the alpha release concerns deprecation of some life-cycle methods and introduction of one (four) new.This change aims to enforce best practices (you can read up on why those functions can be tricky in my article on life-cycle methods) which will be…
  • Instead the function should return the updated state data, or null if no update is needed:Using getDerivedStateFromProps in order to update stateThe returned value behaves similarly to current setState value — you only need to return the part of state that changes, all other values will be preserved.Things to keep in mind:Remember to init state!You…

React 16.3-alpha just hit npmjs and can be downloaded and added to your project. What are the biggest, most interesting changes? Context API was always a thing of mystery — it’s an official…
Continue reading “What’s new in React 16.3(.0-alpha) – Bartosz Szczeciński – Medium”