Fix incorrect type definitions in useCallback (rescript-lang#97)

* fix incorrect type definitions in useCallback

* changelog

* 'callback

* remove useCallback0-7

* Revert "remove useCallback0-7"

This reverts commit f1422b4.

* deprecate useCallback0-7, add 'dep

* changelog

* Update CHANGELOG.md

Co-authored-by: Christoph Knittel <christoph@knittel.cc>

* fix deprecation message

* onEveryRender hooks binding

* useEffectOnEveryRender in router

* fix useEffect in router

* Update CHANGELOG.md

Co-authored-by: Christoph Knittel <christoph@knittel.cc>

---------

Co-authored-by: Christoph Knittel <christoph@knittel.cc>

Author: mununki

CHANGELOG.md

@@ -19,6 +19,14 @@
 #### :boom: Breaking Change
 
 - Requires ReScript 11.0.0-alpha.6 or newer.
+- Deprecated use\*N functions in favor of changing the signature of the main hook function.
+  - For example, useEffect instead of useEffectN e.g. `useEffect3(f, (a, b, c))` -> `useEffect(f, (a, b, c))`
+  - The affected hooks include `useEffect`, `useLayoutEffect`, `useCallback`, `useMemo`, `useImperativeHandle`, `useInsertionEffect`
+  - With this change, it is now possible to pass any value as the second argument `'deps`. In case you pass an invalid value, you will get a warning from React at runtime. You should be using one of the following values for the dependency array:
+    - 0 dependencies: `[]`
+    - 1 dependency: `[a]`
+    - more than 1 dependency: `(a, b, ...)`
+- For calling `useEffect`, `useLayoutEffect` etc. *without* a dependency array (meaning that the effect is executed on every render), there are now separate bindings `useEffectOnEveryRender`, `useLayoutEffectOnEveryRender` etc.
 
 #### :bug: Bug Fix
 

src/React.res

@@ -157,171 +157,198 @@ external useReducerWithMapState: (
 ) => ('state, 'action => unit) = "useReducer"
 
 @module("react")
-external useEffect: (@uncurry (unit => option<unit => unit>)) => unit = "useEffect"
+external useEffectOnEveryRender: (@uncurry (unit => option<unit => unit>)) => unit = "useEffect"
 @module("react")
+external useEffect: (@uncurry (unit => option<unit => unit>), 'deps) => unit = "useEffect"
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
 external useEffect0: (@uncurry (unit => option<unit => unit>), @as(json`[]`) _) => unit =
   "useEffect"
-@module("react")
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
 external useEffect1: (@uncurry (unit => option<unit => unit>), array<'a>) => unit = "useEffect"
-@module("react")
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
 external useEffect2: (@uncurry (unit => option<unit => unit>), ('a, 'b)) => unit = "useEffect"
-@module("react")
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
 external useEffect3: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c)) => unit = "useEffect"
-@module("react")
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
 external useEffect4: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd)) => unit =
   "useEffect"
-@module("react")
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
 external useEffect5: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd, 'e)) => unit =
   "useEffect"
-@module("react")
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
 external useEffect6: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd, 'e, 'f)) => unit =
   "useEffect"
-@module("react")
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
 external useEffect7: (
   @uncurry (unit => option<unit => unit>),
   ('a, 'b, 'c, 'd, 'e, 'f, 'g),
 ) => unit = "useEffect"
 
 @module("react")
-external useLayoutEffect: (@uncurry (unit => option<unit => unit>)) => unit = "useLayoutEffect"
+external useLayoutEffectOnEveryRender: (@uncurry (unit => option<unit => unit>)) => unit =
+  "useLayoutEffect"
 @module("react")
+external useLayoutEffect: (@uncurry (unit => option<unit => unit>), 'deps) => unit =
+  "useLayoutEffect"
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
 external useLayoutEffect0: (@uncurry (unit => option<unit => unit>), @as(json`[]`) _) => unit =
   "useLayoutEffect"
-@module("react")
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
 external useLayoutEffect1: (@uncurry (unit => option<unit => unit>), array<'a>) => unit =
   "useLayoutEffect"
-@module("react")
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
 external useLayoutEffect2: (@uncurry (unit => option<unit => unit>), ('a, 'b)) => unit =
   "useLayoutEffect"
-@module("react")
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
 external useLayoutEffect3: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c)) => unit =
   "useLayoutEffect"
-@module("react")
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
 external useLayoutEffect4: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd)) => unit =
   "useLayoutEffect"
-@module("react")
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
 external useLayoutEffect5: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd, 'e)) => unit =
   "useLayoutEffect"
-@module("react")
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
 external useLayoutEffect6: (
   @uncurry (unit => option<unit => unit>),
   ('a, 'b, 'c, 'd, 'e, 'f),
 ) => unit = "useLayoutEffect"
-@module("react")
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
 external useLayoutEffect7: (
   @uncurry (unit => option<unit => unit>),
   ('a, 'b, 'c, 'd, 'e, 'f, 'g),
 ) => unit = "useLayoutEffect"
 
 @module("react")
-external useMemo: (@uncurry (unit => 'any)) => 'any = "useMemo"
+external useMemo: (@uncurry (unit => 'any), 'deps) => 'any = "useMemo"
 
-@module("react")
+@module("react") @deprecated("Please use useMemo instead")
 external useMemo0: (@uncurry (unit => 'any), @as(json`[]`) _) => 'any = "useMemo"
 
-@module("react")
+@module("react") @deprecated("Please use useMemo instead")
 external useMemo1: (@uncurry (unit => 'any), array<'a>) => 'any = "useMemo"
 
-@module("react")
+@module("react") @deprecated("Please use useMemo instead")
 external useMemo2: (@uncurry (unit => 'any), ('a, 'b)) => 'any = "useMemo"
 
-@module("react")
+@module("react") @deprecated("Please use useMemo instead")
 external useMemo3: (@uncurry (unit => 'any), ('a, 'b, 'c)) => 'any = "useMemo"
 
-@module("react")
+@module("react") @deprecated("Please use useMemo instead")
 external useMemo4: (@uncurry (unit => 'any), ('a, 'b, 'c, 'd)) => 'any = "useMemo"
 
-@module("react")
+@module("react") @deprecated("Please use useMemo instead")
 external useMemo5: (@uncurry (unit => 'any), ('a, 'b, 'c, 'd, 'e)) => 'any = "useMemo"
 
-@module("react")
+@module("react") @deprecated("Please use useMemo instead")
 external useMemo6: (@uncurry (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f)) => 'any = "useMemo"
 
-@module("react")
+@module("react") @deprecated("Please use useMemo instead")
 external useMemo7: (@uncurry (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'any = "useMemo"
 
 @module("react")
-external useCallback: 'f => 'f = "useCallback"
+external useCallback: ('f, 'deps) => 'f = "useCallback"
 
-@module("react")
+@module("react") @deprecated("Please use useCallback instead")
 external useCallback0: ('f, @as(json`[]`) _) => 'f = "useCallback"
 
-@module("react")
+@module("react") @deprecated("Please use useCallback instead")
 external useCallback1: ('f, array<'a>) => 'f = "useCallback"
 
-@module("react")
+@module("react") @deprecated("Please use useCallback instead")
 external useCallback2: ('f, ('a, 'b)) => 'f = "useCallback"
 
-@module("react")
+@module("react") @deprecated("Please use useCallback instead")
 external useCallback3: ('f, ('a, 'b, 'c)) => 'f = "useCallback"
 
-@module("react")
+@module("react") @deprecated("Please use useCallback instead")
 external useCallback4: ('f, ('a, 'b, 'c, 'd)) => 'f = "useCallback"
 
-@module("react")
+@module("react") @deprecated("Please use useCallback instead")
 external useCallback5: ('f, ('a, 'b, 'c, 'd, 'e)) => 'f = "useCallback"
 
-@module("react")
-external useCallback6: ('f, ('a, 'b, 'c, 'd, 'e, 'f)) => 'f = "useCallback"
+@module("react") @deprecated("Please use useCallback instead")
+external useCallback6: ('callback, ('a, 'b, 'c, 'd, 'e, 'f)) => 'callback = "useCallback"
 
-@module("react")
-external useCallback7: ('f, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'f = "useCallback"
+@module("react") @deprecated("Please use useCallback instead")
+external useCallback7: ('callback, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'callback = "useCallback"
 
 @module("react")
 external useContext: Context.t<'any> => 'any = "useContext"
 
 @module("react") external useRef: 'value => ref<'value> = "useRef"
 
 @module("react")
+external useImperativeHandleOnEveryRender: (
+  Js.Nullable.t<ref<'value>>,
+  @uncurry (unit => 'value),
+) => unit = "useImperativeHandle"
+
+@module("react")
+external useImperativeHandle: (
+  Js.Nullable.t<ref<'value>>,
+  @uncurry (unit => 'value),
+  'deps,
+) => unit = "useImperativeHandle"
+
+@module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
 external useImperativeHandle0: (
   Js.Nullable.t<ref<'value>>,
   @uncurry (unit => 'value),
   @as(json`[]`) _,
 ) => unit = "useImperativeHandle"
 
 @module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
 external useImperativeHandle1: (
   Js.Nullable.t<ref<'value>>,
   @uncurry (unit => 'value),
   array<'a>,
 ) => unit = "useImperativeHandle"
 
 @module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
 external useImperativeHandle2: (
   Js.Nullable.t<ref<'value>>,
   @uncurry (unit => 'value),
   ('a, 'b),
 ) => unit = "useImperativeHandle"
 
 @module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
 external useImperativeHandle3: (
   Js.Nullable.t<ref<'value>>,
   @uncurry (unit => 'value),
   ('a, 'b, 'c),
 ) => unit = "useImperativeHandle"
 
 @module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
 external useImperativeHandle4: (
   Js.Nullable.t<ref<'value>>,
   @uncurry (unit => 'value),
   ('a, 'b, 'c, 'd),
 ) => unit = "useImperativeHandle"
 
 @module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
 external useImperativeHandle5: (
   Js.Nullable.t<ref<'value>>,
   @uncurry (unit => 'value),
   ('a, 'b, 'c, 'd, 'e),
 ) => unit = "useImperativeHandle"
 
 @module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
 external useImperativeHandle6: (
   Js.Nullable.t<ref<'value>>,
   @uncurry (unit => 'value),
   ('a, 'b, 'c, 'd, 'e, 'f),
 ) => unit = "useImperativeHandle"
 
 @module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
 external useImperativeHandle7: (
   Js.Nullable.t<ref<'value>>,
   @uncurry (unit => 'value),
@@ -336,34 +363,45 @@ external useImperativeHandle7: (
 external useTransition: unit => (bool, (. unit => unit) => unit) = "useTransition"
 
 @module("react")
-external useInsertionEffect: (@uncurry (unit => option<unit => unit>)) => unit =
+external useInsertionEffectOnEveryRender: (@uncurry (unit => option<unit => unit>)) => unit =
   "useInsertionEffect"
 @module("react")
+external useInsertionEffect: (@uncurry (unit => option<unit => unit>), 'deps) => unit =
+  "useInsertionEffect"
+@module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
 external useInsertionEffect0: (@uncurry (unit => option<unit => unit>), @as(json`[]`) _) => unit =
   "useInsertionEffect"
 @module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
 external useInsertionEffect1: (@uncurry (unit => option<unit => unit>), array<'a>) => unit =
   "useInsertionEffect"
 @module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
 external useInsertionEffect2: (@uncurry (unit => option<unit => unit>), ('a, 'b)) => unit =
   "useInsertionEffect"
 @module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
 external useInsertionEffect3: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c)) => unit =
   "useInsertionEffect"
 @module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
 external useInsertionEffect4: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd)) => unit =
   "useInsertionEffect"
 @module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
 external useInsertionEffect5: (
   @uncurry (unit => option<unit => unit>),
   ('a, 'b, 'c, 'd, 'e),
 ) => unit = "useInsertionEffect"
 @module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
 external useInsertionEffect6: (
   @uncurry (unit => option<unit => unit>),
   ('a, 'b, 'c, 'd, 'e, 'f),
 ) => unit = "useInsertionEffect"
 @module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
 external useInsertionEffect7: (
   @uncurry (unit => option<unit => unit>),
   ('a, 'b, 'c, 'd, 'e, 'f, 'g),
@@ -401,31 +439,31 @@ module Uncurried = {
   ) => ('state, (. 'action) => unit) = "useReducer"
 
   @module("react")
-  external useCallback: 'f => 'f = "useCallback"
+  external useCallback: ('f, 'deps) => 'f = "useCallback"
 
-  @module("react")
+  @module("react") @deprecated("Please use useCallback instead")
   external useCallback0: ('f, @as(json`[]`) _) => 'f = "useCallback"
 
-  @module("react")
+  @module("react") @deprecated("Please use useCallback instead")
   external useCallback1: ('f, array<'a>) => 'f = "useCallback"
 
-  @module("react")
+  @module("react") @deprecated("Please use useCallback instead")
   external useCallback2: ('f, ('a, 'b)) => 'f = "useCallback"
 
-  @module("react")
+  @module("react") @deprecated("Please use useCallback instead")
   external useCallback3: ('f, ('a, 'b, 'c)) => 'f = "useCallback"
 
-  @module("react")
+  @module("react") @deprecated("Please use useCallback instead")
   external useCallback4: ('f, ('a, 'b, 'c, 'd)) => 'f = "useCallback"
 
-  @module("react")
+  @module("react") @deprecated("Please use useCallback instead")
   external useCallback5: ('f, ('a, 'b, 'c, 'd, 'e)) => 'f = "useCallback"
 
-  @module("react")
-  external useCallback6: ('f, ('a, 'b, 'c, 'd, 'e, 'f)) => 'f = "useCallback"
+  @module("react") @deprecated("Please use useCallback instead")
+  external useCallback6: ('callback, ('a, 'b, 'c, 'd, 'e, 'f)) => 'callback = "useCallback"
 
-  @module("react")
-  external useCallback7: ('f, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'f = "useCallback"
+  @module("react") @deprecated("Please use useCallback instead")
+  external useCallback7: ('callback, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'callback = "useCallback"
 }
 
 @set

src/RescriptReactRouter.res

@@ -62,7 +62,8 @@ let arrayToList = a => {
 let pathParse = str =>
   switch str {
   | ""
-  | "/" => list{}
+  | "/" =>
+    list{}
   | raw =>
     /* remove the preceeding /, which every pathname seems to have */
     let raw = Js.String.sliceToEnd(~from=1, raw)
@@ -190,7 +191,7 @@ let useUrl = (~serverUrl=?, ()) => {
     }
   )
 
-  React.useEffect0(() => {
+  React.useEffect(() => {
     let watcherId = watchUrl(url => setUrl(_ => url))
 
     // check for updates that may have occured between the initial state and
@@ -201,7 +202,7 @@ let useUrl = (~serverUrl=?, ()) => {
     }
 
     Some(() => unwatchUrl(watcherId))
-  })
+  }, [])
 
   url
 }