https://github.com/rwu823/react-dev-memo

🍗 Don't let your pure component no pure.
https://github.com/rwu823/react-dev-memo

component debug dev memo pure react tool

Last synced: 2 months ago
JSON representation

🍗 Don't let your pure component no pure.

• Host: GitHub
• URL: https://github.com/rwu823/react-dev-memo
• Owner: rwu823
• License: mit
• Created: 2019-08-20T14:17:26.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T08:40:30.000Z (about 1 year ago)
• Last Synced: 2024-10-09T07:27:14.332Z (2 months ago)
• Topics: component, debug, dev, memo, pure, react, tool
• Language: TypeScript
• Homepage: https://rwu823.github.io/react-dev-memo
• Size: 2.65 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  
react-dev-memo

  

    

  




  

    

  

  

    

  

  





  Don't let your pure component no pure.





  Live Demo



## Screen

![demo-screen](./public/demo-screen.gif)

## Story

In these recent days, React team released a new [devtool](https://reactjs.org/blog/2019/08/15/new-react-devtools.html) 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

```sh

yarn add react-dev-memo

```

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

## Usage

```diff

import React from 'react'

+ import devMemo from 'react-dev-memo'

- const PureComponent = ({ name, age }) => 


+ const PureComponent = ({ name, age, ...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:

```diff

import devMemo from 'react-dev-memo'

- const PureComponent = () => 


+ const PureComponent = props => 


export default devMemo(PureComponent)

```

## Options

```ts

export interface DevMemoOptions {

  /** display highlight */

  highlight: boolean

  /** display console */

  console: boolean

  /** set outline style */

  outline: string

  /** set highlight duration time */

  duration: number

}

```