Hello 🙋🏻‍♀️

Renée Ghattas

Software Developer @ Qlik

@rghat

@rghattas

@rghat

Sharing Logic across React Components

React Timeline

My React Timeline

November 28, 2017

  • First time using React in a professional setting
  • First exposure to Higher-order Components (HOCs)

https://reactjs.org/docs/higher-order-components.html

Higher-order Component (HOC)

A higher-order component is a function that takes a component and returns a new component.

    // Take in a component as argument WrappedComponent
    function simpleHOC(WrappedComponent) {
      // And return a new anonymous component
      return class extends React.Component{
        render() {
          return <WrappedComponent {...this.props}/>;
        }
      }
    }

Basic example:

Going back to this...

export default connect(mapStateToProps, mapDispatchToProps)(MyFancyComponent)

https://react-redux.js.org/api/connect

Redux: connect HOC

The connect HOC connects a component to the Redux store.

https://github.com/reduxjs/react-redux/blob/master/src/connect/connect.js

Negatives of using HOCs

  • Changes component hierarchy
<withRedux>
  <withAuth>
    <withLogging>
      <withLayout>
        <MyFancyComponent />
      </withLayout>
    </withLogging>
  </withAuth>
</withRedux>
  • Very verbose
  • Hard to debug
  • Reordering HOCs can break things
  • Prop collisions - HOCs with same prop names

A few months later...

Render props

Render props

  • The component just injects functionality without needing to know how it is being applied to the UI.
  • Uses a render prop whose value is a function.
import React from 'react';

const SECRET_TO_LIFE = 42;

class ShareSecretToLife extends React.Component {
  render() {
    return (
      <div>
       {this.props.render({ secretToLife: SECRET_TO_LIFE })}
      </div>
    );
  }
}

const ShareSecretWithWorld = () => (
  <ShareSecretToLife 
    render={({ secretToLife }) => (
      <h1>{secretToLife}</h1>
    )}
  />
);

Negatives of using Render props

  • Nested render props (wrapper hell)
  • Can clutter up your render method
  • Still pretty verbose
  • Makes it difficult to unit test component in isolation
  • Pure components: can negate the advantage that comes from using React.PureComponent

February 6, 2019

🤔

 Forget everything you've learned about React...

Lol jk.

https://usehooks.com

  • Use state and other React features without classes.
  • It's just a function.
  • Do not change component hierarchy.
  • Allows splitting a component into smaller reusable functions (rather than forcing a split based on lifecycle methods).
  • LESS CODE!
  • Work side-by-side with existing code so you can adopt them gradually.

Hooks (specifically, custom hooks)

https://reactjs.org/docs/hooks-intro.html#classes-confuse-both-people-and-machines

Sounds good?

  • Easier to compose (static)
  • One level of HOC (and you're using class components)

How do you choose?

HOCs:

const page = compose(
  withRedux,
  withAuth,
  withLogging,
  withLayout('default'),
);

Render props:

  • Easier to set up than HOCs
  • Dynamic composition
  • Less boiler code
  • Can use both props and state in render props component.
  • You're using class components.

Hooks:

  • Should be able to satisfy most needs for reusing component logic. Look here first.

My thoughts...

  • I'm a big fan of hooks.
  • New projects: Start with hooks.
  • Existing projects: Reevaluate your HOC and render prop usage, but don't go crazy.
  • Class components, HOCs and render props are not going anywhere.

Going back to this...

import { useSelector, useDispatch } from 'react-redux'

Instead of using connect() HOC...

export default connect(mapStateToProps, mapDispatchToProps)(MyFancyComponent)

Thanks!

Sharing Logic across Components

By Renee Ghattas

Made with Slides.com

Sharing Logic across Components

  • 516

More from Renee Ghattas