Following instructions in .github/contributing.md fails when using the latest React 18

[dmitri-minkin]

Describe the bug Following instructions in .github/contributing.md fails when using the latest React 18.

⚠️ Make a Codesandbox ⚠️ Not relevant

To Reproduce Steps to reproduce the behavior:

1. Follow instruction in .github/contributing.md
2. Replace code in src/App.js in use-http-sandbox to call useFetch.

import logo from './logo.svg';
import './App.css';
import { useFetch } from 'use-http';
import { useCallback } from 'react';

function App() {
  const {get, error, data, loading} = useFetch();
  return (
    <div className="App">
      Hello
    </div>
  );
}

export default App;

3. Start the app in use-http-sandbox: npm run start

Notice the error:

Compiled with problems: × ERROR Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem. Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
4. You might have mismatching versions of React and the renderer (such as React DOM)
5. You might be breaking the Rules of Hooks
6. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem. at resolveDispatcher (http://localhost:3000/static/js/bundle.js:4405:17) at Object.useContext (http://localhost:3000/static/js/bundle.js:4411:24) at useFetchArgs (http://localhost:3000/static/js/bundle.js:2160:25) at useFetch (http://localhost:3000/static/js/bundle.js:1750:35) at App (http://localhost:3000/static/js/bundle.js:87:57) at renderWithHooks (http://localhost:3000/static/js/bundle.js:25862:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29148:17) at beginWork (http://localhost:3000/static/js/bundle.js:30444:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:15454:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:15498:20)

Expected behavior The app should show the UI and not fail with error.

Possible reasons

There is a mismatch between dependency versions requirements for react and react-dom in use-http vs use-http-sandbox.

use-http-sandbox needs React and react-dom 18 while use-http depends on urs that depends on react-dom@"^16.13.1 || ^17.0.0"

this is also visible when running command in use-http folder: npm link ../use-http-sandbox/node_modules/react

npm ERR! Could not resolve dependency: npm ERR! peer react-dom@"^16.13.1 || ^17.0.0" from urs@0.0.8

[dmitri-minkin]

Looking into other issues I notice that React 18 is a known problem.

May be at least we can mention in contributing.md the step to revert the dependency of use-http-sandbox to React 17 for react and react-dom in package.json ?

see for example the steps in create-react-app/issues/12269

[alex-cory]

Should be updated with React 18 now