Upgraded to react@next react-dom@next and (forcibly) removed warnings

Author: Zaydek Michels-Gualtieri

package.json

@@ -3,8 +3,8 @@
 	"dependencies": {
 		"emoji-trie": "https://github.com/codex-src/emoji-trie.js",
 		"lodash": "^4.17.19",
-		"react": "^16.13.1",
-		"react-dom": "^16.13.1",
+		"react": "next",
+		"react-dom": "next",
 		"react-scripts": "next",
 		"use-immer": "^0.4.1",
 		"uuidv4": "^6.1.0"

src/Editor/Editor.js

@@ -32,6 +32,8 @@ const Editor = ({ id, className, style, state, dispatch, children }) => {
 	const pointerdownRef = React.useRef(false)
 
 	// Mounts elements from props.children (once).
+	//
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	React.useLayoutEffect(
 		React.useCallback(() => {
 			const elements = initElementsFromChildren(children)
@@ -44,6 +46,8 @@ const Editor = ({ id, className, style, state, dispatch, children }) => {
 	)
 
 	// Rerenders on state.shouldRerender.
+	//
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	React.useLayoutEffect(
 		React.useCallback(() => {
 			// https://bugs.chromium.org/p/chromium/issues/detail?id=138439#c10

src/Editor/useEditor/useEditor.js

@@ -4,7 +4,7 @@ import React from "react"
 import { initElementsFromMarkup } from "../parsers"
 import { useImmerReducer } from "use-immer"
 
-const newInitialState = () => ({
+const initialState = {
 	mounted: false,
 	focused: false,
 	elements: [
@@ -28,7 +28,7 @@ const newInitialState = () => ({
 	},
 	rangeTypes: {},
 	shouldRerender: 0,
-})
+}
 
 function EditorReducer(e, action) {
 	switch (action.type) {
@@ -64,17 +64,20 @@ function EditorReducer(e, action) {
 	}
 }
 
-// Instantiates an editor from markup.
+// Instantiates an editor state from markup.
 export function useEditorFromMarkup(markup) {
-	const initialState = React.useMemo(() => {
+	const state = React.useMemo(() => {
 		const elements = initElementsFromMarkup(markup)
-		return newInitialState(elements)
+		const state = {
+			...initialState,
+			elements,
+		}
+		return state
 	}, [markup])
-	return useImmerReducer(EditorReducer, initialState)
+	return useImmerReducer(EditorReducer, state)
 }
 
-// Instantiates an editor.
+// Instantiates an editor state.
 export function useEditor() {
-	const initialState = React.useMemo(newInitialState)
 	return useImmerReducer(EditorReducer, initialState)
 }

src/EditorApp/EditorApp.js

@@ -23,6 +23,8 @@ const EditorApp = () => {
 
 	// Mounts deferred elements to preferences (because of the
 	// props.children pattern).
+	//
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	React.useEffect(
 		React.useCallback(() => {
 			if (state.mounted) {
@@ -53,6 +55,8 @@ const EditorApp = () => {
 	}, [prefs.readOnlyMode])
 
 	// Manages rendered markdown.
+	//
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	React.useEffect(
 		React.useCallback(() => {
 			if (prefs.show) {
@@ -69,6 +73,8 @@ const EditorApp = () => {
 	)
 
 	// Manages rendered markup.
+	//
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	React.useEffect(
 		React.useCallback(() => {
 			if (prefs.show) {

yarn.lock

@@ -9333,7 +9333,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9559,15 +9559,14 @@ react-dev-utils@11.0.0-next.77+3d74b79d:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
-  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
+react-dom@next:
+  version "17.0.0-rc.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.0-rc.0.tgz#237b4cca9cf817329373424bde00736f11fd7541"
+  integrity sha512-Ny2SlnMe+SxWRVDX2aLyWsv3ltbJC0gVyWtedfoJnV2265ePcM8BLY9fJjKb4ZXwcQ+pwZFdsURYarJ5qEEMeQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "0.20.0-rc.0"
 
 react-error-overlay@7.0.0-next.77+3d74b79d:
   version "7.0.0-next.77"
@@ -9647,14 +9646,13 @@ react-scripts@next:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
-  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+react@next:
+  version "17.0.0-rc.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.0-rc.0.tgz#91a4d2085f07b501175a2434bd65b35aa0e95686"
+  integrity sha512-GPOdeCEE5HL9jRh7YIXoqBBxQVTqKtMm7tbH0Q//PJZV9EkFyUSDUglvIO/0i42PuUstEBcmOwlodTV2R9iStg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-pkg-up@^2.0.0:
   version "2.0.0"
@@ -10203,10 +10201,10 @@ saxes@^5.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@0.20.0-rc.0:
+  version "0.20.0-rc.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.0-rc.0.tgz#9cb397f88f9decea28d159d3aad068b54a6f35e4"
+  integrity sha512-5CZiVhk9xI9VmqaodZH+eO3aKgqYwjZ8uf9lnfRlYEwaB4lbmIq0mzuNY5w52sbPlZP9pifXQaLGudKHMgQZcw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"