17 Matching Annotations
  1. Nov 2019
    1. const setRefs = useRef(new Map()).current; const { children } = props; return ( <div> {React.Children.map(children, child => { return React.cloneElement(child, { // v not innerRef ref: node => { console.log('imHere'); return !node ? setRefs.delete(child.key) : setRefs.set(child.key, node)

      Illustrates the importance of having unique keys when iterating over children, since that allows them to be used as unique keys in a Map.

  2. Oct 2019
    1. refKey: if you're rendering a composite component, that component will need to accept a prop which it forwards to the root DOM element. Commonly, folks call this innerRef. So you'd call: getRootProps({refKey: 'innerRef'}) and your composite component would forward like: <div ref={props.innerRef} />
  3. Sep 2019
    1. That’s because ref is not a prop. Like key, it’s handled differently by React.
  4. Aug 2019
    1. That’s because ref is not a prop. Like key, it’s handled differently by React.
    2. Although such encapsulation is desirable for application-level components like FeedStory or Comment, it can be inconvenient for highly reusable “leaf” components like FancyButton or MyTextInput. These components tend to be used throughout the application in a similar manner as a regular DOM button and input, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations.
    1. Since these are simply functions, you can chain them so that multiple callbacks gets attached to a single element. node => { ref1(node); ref2(node); }
    1. export function assignForwardedRefs(forwardedRef, refToAssign) { if (forwardedRef) { if (typeof forwardedRef === 'function') { forwardedRef(refToAssign) } else { forwardedRef.current = refToAssign } } }

      I don't fully understand when you might need this, but it could come in handy.

      I assumed you could forward refs the same whether they are callbacks or Ref objects, but maybe not??

    1. In order to measure the position or size of a DOM node, you can use a callback ref.

      Interesting use of a ref...

    2. Is there something like instance variables? Yes! The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class.

      Not just for references to DOM elements…

    1. However, useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.

      Not just for references to DOM elements...

    2. You might be familiar with refs primarily as a way to access the DOM. If you pass a ref object to React with <div ref={myRef} />, React will set its .current property to the corresponding DOM node whenever that node changes.

      Good explanation, alluding to how myRef is simply/is like a callback that does sets ref.current = el...