joshwcomeau / joshwcomeau/react-flip-move

Removing `findDOMNode`

Open
#89 7 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
JavaScript
Stars
4.1k
Forks
250
PR merge metrics
No merged PRs in 30d

Description

Hey @joshwcomeau. I look at #88 and saw [your comment](https://github.com/kdemoya/react-flip-move/blob/4ae798c45ca847daf7b33dc7465982f29aab7f35/src/dom-manipulation.js#L193-L195):

```
// While ReactDOM's `findDOMNode` is discouraged, it's the only
// publicly-exposed way to find the underlying DOM node for
// composite components.
```

I've been reading up on `findDOMNode`, there's a discussion at yannickcr/eslint-plugin-react#678. I thought I'd just leave a comment here detailing how one might remove use of this function. I'm not necessarily convinced this is a good idea.

First option is `FlipMove` would expect each child to be a html element, adding a `ref` with `cloneElement`. This means library consumers will have to wrap custom components in an `li` or `div`. `FlipMove` would just assume that all instances returned by `ref` are elements (erroring/warning otherwise).

Another option might be to require the custom child components to expose a `containerRef` prop.

```js
// `containerRef` prop required/supplied by `FlipMove`
function Custom({ containerRef, text }) {
return

  • {text}

  • }

    function List({ items }) {
    const itemElements = items.map(item =>

    )
    return {itemElements}
    }
    ```

    FlipMove can do something like:

    ```js
    childrenWithRefs() {
    return this.state.children.map(child => {
    const ref = domNode => {
    if (!this.childrenData[child.key]) {
    this.childrenData[child.key] = {};
    }
    this.childrenData[child.key].domNode = domNode;
    }
    // If it's a html element, then we just use `ref`, otherwise require `containerRef`.
    return isHtmlElement(child.type)
    ? React.cloneElement(child, { ref })
    : React.cloneElement(child, { containerRef: ref })
    })
    }
    ```

    Nice thing about this approach is that it means you can use stateless function components since they just have to pass the `ref` up via props.

    Contributor guide

    No contributing guide indexed for this repository

    Assessment

    This issue has not been assessed yet.

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.