Fix StrictMode in React 18 (#255)

* chore(deps): bump react and styled-components

* chore: use createRoot, StrictMode in example

* fix: move timer to class field to support StrictMode

Fixes #254

* chore: fix tests with react 18

* chore: remove unused enzyme-adapter-react-16 types

Co-authored-by: Jakub Sarnowski <hello@jsarnowski.com>

.changeset/fresh-tips-smell.md

@@ -0,0 +1,5 @@
+---
+'reaptcha': patch
+---
+
+support StrictMode in react@18

.changeset/smart-books-peel.md

@@ -0,0 +1,5 @@
+---
+'reaptcha-example': minor
+---
+
+Use react@18 and enable StrictMode

example/package.json

@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "formik": "^1.1.1",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
-    "reaptcha": "^1.11.0",
-    "styled-components": "4.1.3"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "reaptcha": "^1.12.0",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.24",

example/src/index.tsx

@@ -1,5 +1,15 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './containers';
 
-render(<App />, document.getElementById('app'));
+const app = document.getElementById('app');
+if (!app) {
+  throw new Error('No app element found');
+}
+
+const root = createRoot(app);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

lib/index.test.tsx

@@ -5,7 +5,7 @@ import test from 'ava';
 import sinon from 'sinon';
 import jsdom from 'jsdom-global';
 import Enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 import Reaptcha, { Grecaptcha, Props } from './index';
 

lib/index.tsx

@@ -60,7 +60,6 @@ type State = {
   ready: boolean;
   rendered: boolean;
   invisible: boolean;
-  timer?: number;
 };
 
 const RECAPTCHA_SCRIPT_URL = 'https://recaptcha.net/recaptcha/api.js';
@@ -78,6 +77,7 @@ const PROPS_THAT_SHOULD_CAUSE_RERENDER: Array<keyof RecaptchaBaseConfig> = [
 
 class Reaptcha extends Component<Props, State> {
   container?: HTMLDivElement | null;
+  timer?: number | undefined;
 
   state: State = {
     instanceKey: Date.now(),
@@ -156,8 +156,8 @@ class Reaptcha extends Component<Props, State> {
   _onError = () => this.props.onError && this.props.onError();
 
   _stopTimer = (): void => {
-    if (this.state.timer) {
-      clearInterval(this.state.timer);
+    if (this.timer) {
+      clearInterval(this.timer);
     }
   };
 
@@ -167,13 +167,12 @@ class Reaptcha extends Component<Props, State> {
     if (this._isAvailable()) {
       this._prepare();
     } else {
-      const timer = window.setInterval(() => {
+      this.timer = window.setInterval(() => {
         if (this._isAvailable()) {
           this._prepare();
           this._stopTimer();
         }
       }, 500);
-      this.setState({ timer });
     }
   };
 

package.json

@@ -19,19 +19,18 @@
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@types/enzyme": "^3.10.11",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jsdom-global": "^3.0.2",
     "@types/node": "^17.0.21",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.13",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/sinon": "^10.0.11",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "ava": "^4.0.1",
     "c8": "^7.10.0",
     "cz-conventional-changelog": "^3.1.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^8.10.0",
     "eslint-plugin-react": "^7.29.2",
     "husky": "^4.2.3",