Compose refs helper

[souporserious]

I was curious if you had any ideas about some type of utility to help with composing multiple ref functions that could possibly be added to this library? I'm thinking it would be similar to the composeEvents function we talked about in #32.

I'm wondering if there is any way to memoize all the function calls so we can avoid this caveat when composing multiple refs? It would be really cool if this could be baked into composeEvents as well.

This is my idea:

function memoize(fn) {
  memoize.cache = {}
  return function() {
    var key = JSON.stringify(arguments)
    if (memoize.cache[key]) {
      return memoize.cache[key]
    } else {
      var val = fn.apply(this, arguments)
      memoize.cache[key] = val
      return val
    }
  }
}

function memoizeRefs(...fns) {
  return node => {
    fns.forEach(fn => memoize(fn))
  }
}

[streamich]

Maybe React.createRef() could help?

[TrySound]

@streamich createRef is dead simple and not composable.

[TrySound]

reactjs/rfcs#30 (comment)

[renatorib]

I think composeEvents (#71) can handle multiple refs as well.

const handleRef1 = (ref) => console.log(1, ref)
const handleRef2 = (ref) => console.log(2, ref)

<div {...composeEvents({ ref: handleRef1 }, { ref: handleRef2 })}>
  Ref div
</div>

If someone wants to contribute with this caveat solution say here that I reopen this issue. ✌️

[souporserious]

Nice! Looks like it's working great here 🤘. Wonder if composeProps might be a better name since it can apply to more than events, thoughts? 🤔