Blueprint: Support React Strict Mode

Created on 15 Feb 2019  路  6Comments  路  Source: palantir/blueprint

Environment

  • __Package version(s)__: @blueprintjs/core: 3.13.0

Feature request

Support React Strict Mode to remove unsafe lifecycles, etc.
See: https://reactjs.org/docs/strict-mode.html

Examples

Currently when wrapping Blueprint components with <React.StrictMode>, several warnings are exposed as console errors:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Blueprint3.ResizeSensor which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: Blueprint3.Overlay, Blueprint3.Popover



md5-4beaeb71b855ca27316920280056387e



componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: Blueprint3.Spinner,

(There are probably others)

P1 core enhancement help wanted

Most helpful comment

It seems since React 16.9.0, componentWillReceiveProps usage now logs warnings in non-strict mode too while running tests. Please either rename to UNSAFE_componentWillReceiveProps or remove usage.

````
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

  * Move data fetching code or side effects to componentDidUpdate.
  * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
  * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

  Please update the following components: Blueprint3.Overlay, Blueprint3.Toaster

````

All 6 comments

It seems since React 16.9.0, componentWillReceiveProps usage now logs warnings in non-strict mode too while running tests. Please either rename to UNSAFE_componentWillReceiveProps or remove usage.

````
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

  * Move data fetching code or side effects to componentDidUpdate.
  * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
  * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

  Please update the following components: Blueprint3.Overlay, Blueprint3.Toaster

````

I'm using react 16.13.1 and blueprint 3.26.1. I'm still seeing this error....is that expected?

Ah - I see https://github.com/palantir/blueprint/issues/3979 is still open.

image
I'm also having issues with strict mode.

Until there is a fix/update, what should I do?

There is an error in React strict mode
React v: 17.0.1
BlueprintJS v: 3.37.0

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Blueprint3.ResizeSensor which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node at span at Blueprint3.ResizeSensor (http://localhost:3000/static/js/0.chunk.js:12855:43)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sunabozu picture sunabozu  路  3Comments

sighrobot picture sighrobot  路  3Comments

brsanthu picture brsanthu  路  3Comments

havesomeleeway picture havesomeleeway  路  3Comments

giladgray picture giladgray  路  3Comments