React 18 support

[boy51]

Are there plans for this library to support react 18?

Or is anyone using it in production with react 18 already?

[tpict]

One issue I've noticed under React 18 is that effects tracking "am I mounted" don't have cleanup code which is necessary under 18. This manifests in Downshift powered components receiving focus as soon as the page loads.

The fix is to simply add a return () => { isInitialMountRef.current = true; } cleanup function, but it would be good to know from the maintainers what the plans for 18 compatibility are?

edit: This only affects dev builds with StrictMode enabled by the way.

[cameronbraid]

I regularly get react falling over due to max updates when using downshift in react 18, so there are some concurrent mode issues

[thedanchez]

Any updates on this by any chance?

[silviuaavram]

I don't have the time to dig into this, currently I am migrating the hooks to support 1.2 ARIA pattern. If someone wants to investigate, please do. Thank you!

[danantal]

@cameronbraid We are also experiencing infinite loop like issues - but at least for us, it only happens in production builds, unfortunately... and we managed to get it consistently happening in a cypress e2e test.

The strict mode that @tpict mentioned it's a different issue from what I can tell, that only happens in development.

[Davasny]

In my case it happens on local and production environments but only in browsers based on chromium (Opera and Chrome) and only in responsive testing mode (ctrl+shift+m in opera). Firefox doesn't have this problem

Stack:

react 18.2.0
nextjs 12.2.5

[mimarz]

Any updates on React 18 support?

The fix is to simply add a return () => { isInitialMountRef.current = true; } cleanup function, but it would be good to know from the maintainers what the plans for 18 compatibility are?

Was this fix sufficient or was there some other problems?

[silviuaavram]

One issue I've noticed under React 18 is that effects tracking "am I mounted" don't have cleanup code which is necessary under 18. This manifests in Downshift powered components receiving focus as soon as the page loads.

The fix is to simply add a return () => { isInitialMountRef.current = true; } cleanup function, but it would be good to know from the maintainers what the plans for 18 compatibility are?

edit: This only affects dev builds with StrictMode enabled by the way.

So, can you detail the fix please? Where is that needed and why?

[jeanpan]

Hi @silviuaavram, I created a PR to add the cleanup function for isInitialMountRef initialization to avoid the useEffect firing twice in strict mode (development). Would you mind to review it?

[silviuaavram]

Can someone confirm this is fixed so we can close it? It should be be included in 7.0.5

[akheron]

When compiling a project that uses downshift, type checking still fails with @types/react >= 18:

node_modules/downshift/typings/index.d.ts(112,9): error TS2314: Generic type 'RefObject<T>' requires 1 type argument(s).
node_modules/downshift/typings/index.d.ts(120,9): error TS2314: Generic type 'RefObject<T>' requires 1 type argument(s).
node_modules/downshift/typings/index.d.ts(177,9): error TS2314: Generic type 'RefObject<T>' requires 1 type argument(s).
node_modules/downshift/typings/index.d.ts(414,9): error TS2314: Generic type 'RefObject<T>' requires 1 type argument(s).
node_modules/downshift/typings/index.d.ts(430,9): error TS2314: Generic type 'RefObject<T>' requires 1 type argument(s).
node_modules/downshift/typings/index.d.ts(606,9): error TS2314: Generic type 'RefObject<T>' requires 1 type argument(s).
node_modules/downshift/typings/index.d.ts(622,9): error TS2314: Generic type 'RefObject<T>' requires 1 type argument(s).
node_modules/downshift/typings/index.d.ts(785,9): error TS2314: Generic type 'RefObject<T>' requires 1 type argument(s).
node_modules/downshift/typings/index.d.ts(797,9): error TS2314: Generic type 'RefObject<T>' requires 1 type argument(s).

[silviuaavram]

@akheron can you create a PR with a fix for the errors? I'll gladly review and approve. Thanks!

[silviuaavram]

Ok, this is it. https://github.com/downshift-js/downshift/pull/1538

Should be available in v8.2.0.

It updates react to 18, without asking for it as peer dependency. The library should support both >18 and <18.