Skip to content

🔯 Skip unnecessary rerendering with render props.

Notifications You must be signed in to change notification settings

makotot/enabled-update-if

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

EnabledUpdateIf

npm version License CircleCI

Skip unnecessary rerendering with render props.

Why?

shouldComponentUpdate in each components is hard to maintain. <EnabledUpdateIf /> makes more obvious and readable when the component is able to update or not.

Install

$ npm i enabled-update-if

Usage

import React from 'react'
import EnabledUpdateIf from 'enabled-update-if'

return (
  <App>
    <EnabledUpdateIf condition={ this.state.isModalHidden }>
      {
        () => (
          <MainContent>...</MainContent>
        )
      }
    </EnabledUpdateIf>
    <Modal isHidden={ this.state.isModalHidden } />
  </App>
)

If you want to stop update <MainContent /> when modal is opened, wrap with <EnabledUpdateIf /> with passing the state of modal visibility to condition prop.

License

MIT