Higher Order Component

const HigherOrderComponent = BaseComponent => props {
  const addProps = { style: { color: "green" } }
  const newProps = { ...props, ...addProps }
  return <BaseComponent { ...newProps } />
}

const HigherOrderComponent = BaseComponent => props {
  delete props.style
  const newProps = { ...props }
  return <BaseComponent { ...newProps } />
}

React

const React = (function() {
  let _val

  return {
    render(Component) {
      const Comp = Component()
      Comp.render()

      return Comp
    },
    useState(init) {
      _val = _val || init

      function setState(newVal) {
        _val = newVal
      }

      return [_val, setState]
    }
  }
})()

function AppComp() {
  const [age, setAge] = React.useState(21)
  return {
    render() {
      console.log(age)
    },
    ageUp() {
      setAge(age + 1)
    }
  }
}

let App
App = React.render(AppComp)
App.ageUp()
React.render(AgeComp)

useState

function useState(init) {
  let _val = init

  return [
    _val,
    (newVal) => {
      _val = newVal
    }
  ]
}

useReducer

function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState)

  function dispatch(action) {
    const nextState = reducer(state, action)
    setState(nextState)
  }

  return [state, dispatch]
}

useAxios

Component

const { loading, error, data } = useAxios(GET)

if (loading) return 'Loading...'

if (error) return `Error :( ${error}`

  const [recipientID, setRecipientID] = useState(1)
  const isRecipientOnline = useFriendStatus(recipientID)

const [dog, setDog] = useState(null)

const [getDog, { loading, data }] = useLazyAxios(GET_DOG_PHOTO)


if (data && data.dog) setDog(data.dog);

{dog && <img src={dog.displayImage} />}

<button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>