mohandere

import hoistNonReactStatic from 'hoist-non-react-statics';

const withSearch = (WrappedComponent) => {
  class WithSearch extends React.Component {/*...*/}
  hoistNonReactStatic(EithSearch, WrappedComponent);
  return WithSearch;
}

// Define a static method
ProductsList.staticMethod = function() {/*...*/}

mohandere

render() {
  // A new version of ProductsListWithSearch is created on every render
  const ProductsListWithSearch = withSearch(ProductsList);
  // That causes the entire subtree to unmount/remount each time!
  return <ProductsListWithSearch />;
}

mohandere

const withSearch = WrappedComponent => {
  class WithSearch extends React.Component {
    state = {
      searchTerm: ""
    };
    handleSearch = event => {
      this.setState({ searchTerm: event.target.value });
    };

    render() {

mohandere

const ProductsList = (props) => {
  let { data: products } = props;
  return (
    <div>
      <div>
        <div>
          <h2>Products</h2>
        </div>
      </div>
      <div>

mohandere

import products from './products.json'

class ProductsListWithSearch extends React.PureComponent {
  state = {
    searchTerm: ''
  }
  handleSearch = event => {
    this.setState({ searchTerm: event.target.value })
  }
  render() {

mohandere

const ProductCard = props => {
  return (
    <div>
      <hr />
      <p>
        <b>Title:</b> {props.title}
      </p>
      <p>
        <b>Style:</b> {props.style}
      </p>

mohandere

const ProductCard = props => {
  return (
    <div className="product">
      <p>
        <b>Title:</b> {props.title}
      </p>
      <p>
        <b>Style:</b> {props.style}
      </p>
      <p>

mohandere

const propsProxyHOC = (WraapperComponent) => {
  return class extends React.Component {
    state = {
      count: 0
    }
    render() {
      // Pass thru the props that the HOC receives
      return <WraapperComponent {...this.props} {...this.state} />
    }
  }

mohandere

// Example #1

const twice = (f, v) => f(f(v))
const add3 = v => v + 3
twice(add3, 7) // 13

// Example #2

const filter = (predicate, xs) => xs.filter(predicate)
const is = type => x => Object(x) instanceof type

mohandere

import React from 'react'

const higherOrderComponent = WrappedComponent => {
  class HOC extends React.Component {
    render() {
      return <WrappedComponent />
    }
  }
  return HOC
}