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…

What’s new in React 16.3(.0-alpha)React 16.3-alpha just hit npmjs and can be downloaded and added to your project. What are the biggest, most interesting changes?Update 05.02.2018 — I’ve previously made some wrong observation about the createContext behavior, this section was updated to reflect the actual behavior ot he factory function.New context APIContext API was always a thing of mystery — it’s an official, documented React API but at the same time developers warned us not to use it because the API might change with time, and it was missing some documentation on purpose. Well, that time is now — the RFC phase has passed and the new API is merged. 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 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, and set the value we want to pass. The value can of course be dynamic (e.g. based on this.state).Next step is to use the Consumer:Usage of the new context API — Context.ConsumerIf you happen to render the “Consumer”…

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