Migrating to React’s New Context API – kentcdodds

📝 Article => Migrating to React’s New Context API by @kentcdodds  | #ReactJS

  • Because of this significant change, I’m making an update to my advanced component patterns course on Egghead.io to use the new API rather than the old one.
  • The Old Context APIHere’s the version of the implementation with the old context API: – const TOGGLE_CONTEXT = ‘__toggle__’ – function ToggleOn({children}, context) { – const {on} = context[TOGGLE_CONTEXT] – return on ?
  • null : = { – [TOGGLE_CONTEXT]: ToggleButton(props, context) { – const {on, toggle} = context[TOGGLE_CONTEXT] – return ( – Switch on={on} onClick={toggle} {…props} / – ) – } – ToggleButton.contextTypes = { – [TOGGLE_CONTEXT]: Toggle extends React.Component { – static On = ToggleOn – static Off = ToggleOff – static…
  • on}), – () = ) – getChildContext() { – return { – [TOGGLE_CONTEXT]: { – on: this.state.on, – toggle: this.toggle, – }, – } – } – render() { – return div{this.props.children}/div – } – }With the old API, you had to specify a string for what context your component…
  • Here’s my new version of this same exercise: – const ToggleContext = React.createContext({ – on: false, – toggle: () = {}, – })class Toggle extends React.Component { – static On = ({children}) = ( – ToggleContext.Consumer – {({on}) = (on ?

With the recent release of React 16.3.0 came an official context API. You can learn more about the why and how behind this API from my previous blog post: “React’s ⚛️ new Context API”. Because of…
Continue reading “Migrating to React’s New Context API – kentcdodds”

I wish I knew these before diving into React – OpsGenie Engineering

  • By default, setState triggers a re-renderThe default behavior of React is to re-render on every state change, and most of the time it is okay to rely on this.
  • However, re-rendering unnecessarily wastes cycles which is not a good practice.Each component has a method called shouldComponentUpdate and it is called everytime you change state or pass new props from the parent component.
  • We can simply divide lifecycle into three parts:Mounting: an instance of the component is being created and inserted into the DOM.Updating: component is being re-rendered, can be caused by changes of props or state.Unmounting: component is being removed from the DOM.It is very important to understand how these methods work….
  • Compare this.props with nextProps and if there is a significant change, act on it.Two important notes here:React may call componentWillReceiveProps even if the props have not changed, so comparing this.props and nextProps is is invoked before a mounted component receives new props, this means React doesn’t call componentWillReceiveProps with initial…
  • Use React Developer ToolsReact Developer Tools lets you inspect the React component hierarchy, components’ props and state.

At OpsGenie, we had a deep dive into React for our Badges project. I learned many new things & made many mistakes. These are the things that really helped me.
Continue reading “I wish I knew these before diving into React – OpsGenie Engineering”