jonathanong / fn-key-cache

fn-key-cache

Little utility to cache functions based on keys. Useful for creating handlers in React:

import React, { Component } from 'react'

import KeyCache from 'fn-key-cache'

export default class Thing extends Component {
  state = {
    tab: 1
  }

  onClickButton = KeyCache(tab => e => {
    e.preventDefault()

    this.setState({
      tab
    })
  })

  render () {
    const { tab } = this.state

    return (
      <div className='container'>
        <button type='button' className={tab === 1 ? 'active' : ''} onClick={this.onClickButton(1)}>1</button>
        <button type='button' className={tab === 2 ? 'active' : ''} onClick={this.onClickButton(2)}>2</button>
        <button type='button' className={tab === 3 ? 'active' : ''} onClick={this.onClickButton(3)}>3</button>
      </div>
    )
  }
}

Without this utility, new functions would be created on every render(). This is better than doing something like onClick={e => this.setState({ tab: 1 })}, but not better than just creating a new component.