React-bootstrap-typeahead: Usage of deprecated and unsafe methods

[thetric]

Version

• react-bootstrap-typeahead: 3.3.2
• react, react-dom: 16.7.0

Steps to reproduce

Wrap the app in <React.StrictMode> and start it in development mode.

Repro: https://github.com/thetric/react-bootstrap-typeahead-legacy-api-repro

Expected Behavior

This library should be warning-free in React.StrictMode

Actual Behavior

React logs warnings of legacy API usage:

Deprecated findDOMNode

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of InputContainer(Component) which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

    in div (created by HintContainer(TypeaheadInputSingle))
    in HintContainer(TypeaheadInputSingle) (created by Context.Consumer)
    in Unknown (created by InputContainer(Component))
    in InputContainer(Component) (created by Typeahead)
    in div (created by Typeahead)
    in Typeahead (created by WrappedTypeahead)
    in WrappedTypeahead (created by TypeaheadContainer(WrappedTypeahead))
    in RootCloseWrapper (created by TypeaheadContainer(WrappedTypeahead))
    in TypeaheadContainer(WrappedTypeahead) (at App.js:13)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:9)

Learn more about using refs safely here:
https://fb.me/react-strict-mode-find-node

Unsafe lifecycle methods Fixed

Fixed in v4.0.0-alpha.1 pre-release. (see comment below).

Warning: Unsafe lifecycle methods were found within a strict-mode tree:
    in StrictMode (at src/index.js:9)

componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: TypeaheadContainer(WrappedTypeahead)

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

Note from Update on Async Rendering:

Both the older componentWillReceiveProps and the new getDerivedStateFromProps methods add significant complexity to components. This often leads to bugs. Consider simpler alternatives to derived state to make components predictable and maintainable.

Also see You Probably Don't Need Derived State.

In React 17 componentWillReceiveProps will be removed. (Only UNSAFE_XXX will remain.)

[ericgio]

Thanks for the detailed report @thetric. I'm aware of these warnings and have plans to address them when possible. componentWillReceiveProps should go away in the next major version, but requires a delicate and potentially breaking change. findDOMNode is still being used for legacy reasons, since the library supports React < 16.3.

[ericgio]

componentWillReceiveProps removed in v4.0.0-alpha.1 pre-release.

[thetric]

See https://github.com/ericgio/react-bootstrap-typeahead/commit/ae8d0ea4619e191740a7d6b9d288519e55fc3392

[sunaurus]

What are your plans for findDOMNode? Is there any chance of this library dropping support for older versions with a new release in the near future?

[ericgio]

I don't have an immediate timeline for removing findDOMNode or generally dropping support for React < 16.3.

[sunaurus]

Does this mean that you're not planning on supporting concurrent mode when it releases?

[ericgio]

Does this mean that you're not planning on supporting concurrent mode when it releases?

I don't know. I'm not sure when that feature is expected to be released and what "support" would entail. Based on the little I've read about concurrent mode, it seems like the component will work but there may be performance issues.

It sounds like what you're really asking is "Will the component be warning-free in strict mode when concurrent mode is released?" The answer to that, unfortunately, is also "I don't know", since I'm not sure how much work it would be to remove the calls to findDOMNode, but I think it's non-trivial.

[ericgio]

I looked into removing use of findDOMNode and it seems straightforward enough, though it will involve passing down refs and make customized rendering a bit more challenging.

However, this library relies on RootCloseWrapper from react-overlays, and that uses findDOMNode in versions < 2.0. The latest version gets rid of findDOMNode but uses hooks instead, so I'd need to drop support for React < 16.8 to completely remove any references.

[MWallenberg]

This seems like a required, but breaking, change. Might I propose a new major-version of react-bootstrap-typeahead, with dropped support for react < 16.8 but this issue fixed?

[pryan00]

thanks to developers, nice plugin. installed latest version 3.4.7, still "componentwillreceiveprops" warning continues. i installed 4.0.0.-alpha.10, still got the warning. i think newer version (4.x.x.) will be published soon, which has no warning right? Is there any date?
thanx

[rsshilli]

LOL. @pryan00 Are you pressuring volunteers who provide you with free software to move faster?

How about, what's remaining to ship 4.0.0 and how can @pryan00 help? :-)

[pryan00]

yeah, you got me! but you can also think it as a free "live-test result" :)

[ericgio]

Due to #437, I unfortunately had to revert to using UNSAFE_componentWillReceiveProps. These deprecated methods most likely won't be gone in the next major version (v4.0). It's not ideal, but the component should continue to work just fine.

[ericgio]

All deprecated methods (findDOMNode & UNSAFE_componentWillReceiveProps) removed in v5.0.0-alpha.1

[daweimau]

5.1.4 (with React 16.9.0): still warns componentWillReceiveProps has been renamed ... Please update the following components: TypeaheadContainer(WrappedTypeahead)

[ericgio]

@daweimau: componentWillReceiveProps is no longer used in the library. The warning is probably coming from another component you're using. Please refer to the stack trace to find out which one it is.