react-dev-memo
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

react-dev-memo

Don't let your pure component no pure.

Live Demo

Screen

demo-screen

Story

In these recent days, React team released a new devtool version it's awesome and more efficiently but loss highlight update 😢. When we're developing a pure component and the one important thing is how to make sure our component is really pure. So that is why react-dev-memo is created.

Installation

yarn add react-dev-memo

Installs without --dev because it's able to work on production.

Usage

import React from 'react'
+ import devMemo from 'react-dev-memo'
 
- const PureComponent = ({ name, age }) => <div />
+ const PureComponent = ({ name, age, ...props }) => <div {...props} />
 
 
- export default React.memo(PureComponent, (prevProps, nextProps) => prevProps.name === nextProps.name && prevProps.age === nextProps.age)
+ export default devMemo(PureComponent, ['name', 'age'])

Injected style props

And the highlighted styles inject style props into your component:

import devMemo from 'react-dev-memo'
 
- const PureComponent = () => <div />
+ const PureComponent = props => <div {...props} />
 
export default devMemo(PureComponent)

Options

export interface DevMemoOptions {
  /** display highlight */
  highlight: boolean
 
  /** display console */
  console: boolean
 
  /** set outline style */
  outline: string
 
  /** set highlight duration time */
  duration: number
}

Readme

Keywords

Package Sidebar

Install

npm i react-dev-memo

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

9.3 kB

Total Files

6

Last publish

Collaborators

  • rwu823