Skip to content

Commit 2f84dbc

Browse files
mununkicknitt
mununki
and
cknitt
authored
Fix incorrect type definitions in useCallback (#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>
1 parent 94dc1e1 commit 2f84dbc

File tree

4 files changed

+172
-98
lines changed

4 files changed

+172
-98
lines changed

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@
1919
#### :boom: Breaking Change
2020

2121
- Requires ReScript 11.0.0-alpha.6 or newer.
22+
- Deprecated use\*N functions in favor of changing the signature of the main hook function.
23+
- For example, useEffect instead of useEffectN e.g. `useEffect3(f, (a, b, c))` -> `useEffect(f, (a, b, c))`
24+
- The affected hooks include `useEffect`, `useLayoutEffect`, `useCallback`, `useMemo`, `useImperativeHandle`, `useInsertionEffect`
25+
- 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:
26+
- 0 dependencies: `[]`
27+
- 1 dependency: `[a]`
28+
- more than 1 dependency: `(a, b, ...)`
29+
- 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.
2230

2331
#### :bug: Bug Fix
2432

‎src/React.res‎

Lines changed: 86 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -157,171 +157,198 @@ external useReducerWithMapState: (
157157
) => ('state, 'action => unit) = "useReducer"
158158

159159
@module("react")
160-
external useEffect: (@uncurry (unit => option<unit => unit>)) => unit = "useEffect"
160+
external useEffectOnEveryRender: (@uncurry (unit => option<unit => unit>)) => unit = "useEffect"
161161
@module("react")
162+
external useEffect: (@uncurry (unit => option<unit => unit>), 'deps) => unit = "useEffect"
163+
@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
162164
external useEffect0: (@uncurry (unit => option<unit => unit>), @as(json`[]`) _) => unit =
163165
"useEffect"
164-
@module("react")
166+
@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
165167
external useEffect1: (@uncurry (unit => option<unit => unit>), array<'a>) => unit = "useEffect"
166-
@module("react")
168+
@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
167169
external useEffect2: (@uncurry (unit => option<unit => unit>), ('a, 'b)) => unit = "useEffect"
168-
@module("react")
170+
@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
169171
external useEffect3: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c)) => unit = "useEffect"
170-
@module("react")
172+
@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
171173
external useEffect4: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd)) => unit =
172174
"useEffect"
173-
@module("react")
175+
@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
174176
external useEffect5: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd, 'e)) => unit =
175177
"useEffect"
176-
@module("react")
178+
@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
177179
external useEffect6: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd, 'e, 'f)) => unit =
178180
"useEffect"
179-
@module("react")
181+
@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
180182
external useEffect7: (
181183
@uncurry (unit => option<unit => unit>),
182184
('a, 'b, 'c, 'd, 'e, 'f, 'g),
183185
) => unit = "useEffect"
184186

185187
@module("react")
186-
external useLayoutEffect: (@uncurry (unit => option<unit => unit>)) => unit = "useLayoutEffect"
188+
external useLayoutEffectOnEveryRender: (@uncurry (unit => option<unit => unit>)) => unit =
189+
"useLayoutEffect"
187190
@module("react")
191+
external useLayoutEffect: (@uncurry (unit => option<unit => unit>), 'deps) => unit =
192+
"useLayoutEffect"
193+
@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
188194
external useLayoutEffect0: (@uncurry (unit => option<unit => unit>), @as(json`[]`) _) => unit =
189195
"useLayoutEffect"
190-
@module("react")
196+
@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
191197
external useLayoutEffect1: (@uncurry (unit => option<unit => unit>), array<'a>) => unit =
192198
"useLayoutEffect"
193-
@module("react")
199+
@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
194200
external useLayoutEffect2: (@uncurry (unit => option<unit => unit>), ('a, 'b)) => unit =
195201
"useLayoutEffect"
196-
@module("react")
202+
@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
197203
external useLayoutEffect3: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c)) => unit =
198204
"useLayoutEffect"
199-
@module("react")
205+
@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
200206
external useLayoutEffect4: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd)) => unit =
201207
"useLayoutEffect"
202-
@module("react")
208+
@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
203209
external useLayoutEffect5: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd, 'e)) => unit =
204210
"useLayoutEffect"
205-
@module("react")
211+
@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
206212
external useLayoutEffect6: (
207213
@uncurry (unit => option<unit => unit>),
208214
('a, 'b, 'c, 'd, 'e, 'f),
209215
) => unit = "useLayoutEffect"
210-
@module("react")
216+
@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
211217
external useLayoutEffect7: (
212218
@uncurry (unit => option<unit => unit>),
213219
('a, 'b, 'c, 'd, 'e, 'f, 'g),
214220
) => unit = "useLayoutEffect"
215221

216222
@module("react")
217-
external useMemo: (@uncurry (unit => 'any)) => 'any = "useMemo"
223+
external useMemo: (@uncurry (unit => 'any), 'deps) => 'any = "useMemo"
218224

219-
@module("react")
225+
@module("react") @deprecated("Please use useMemo instead")
220226
external useMemo0: (@uncurry (unit => 'any), @as(json`[]`) _) => 'any = "useMemo"
221227

222-
@module("react")
228+
@module("react") @deprecated("Please use useMemo instead")
223229
external useMemo1: (@uncurry (unit => 'any), array<'a>) => 'any = "useMemo"
224230

225-
@module("react")
231+
@module("react") @deprecated("Please use useMemo instead")
226232
external useMemo2: (@uncurry (unit => 'any), ('a, 'b)) => 'any = "useMemo"
227233

228-
@module("react")
234+
@module("react") @deprecated("Please use useMemo instead")
229235
external useMemo3: (@uncurry (unit => 'any), ('a, 'b, 'c)) => 'any = "useMemo"
230236

231-
@module("react")
237+
@module("react") @deprecated("Please use useMemo instead")
232238
external useMemo4: (@uncurry (unit => 'any), ('a, 'b, 'c, 'd)) => 'any = "useMemo"
233239

234-
@module("react")
240+
@module("react") @deprecated("Please use useMemo instead")
235241
external useMemo5: (@uncurry (unit => 'any), ('a, 'b, 'c, 'd, 'e)) => 'any = "useMemo"
236242

237-
@module("react")
243+
@module("react") @deprecated("Please use useMemo instead")
238244
external useMemo6: (@uncurry (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f)) => 'any = "useMemo"
239245

240-
@module("react")
246+
@module("react") @deprecated("Please use useMemo instead")
241247
external useMemo7: (@uncurry (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'any = "useMemo"
242248

243249
@module("react")
244-
external useCallback: 'f => 'f = "useCallback"
250+
external useCallback: ('f, 'deps) => 'f = "useCallback"
245251

246-
@module("react")
252+
@module("react") @deprecated("Please use useCallback instead")
247253
external useCallback0: ('f, @as(json`[]`) _) => 'f = "useCallback"
248254

249-
@module("react")
255+
@module("react") @deprecated("Please use useCallback instead")
250256
external useCallback1: ('f, array<'a>) => 'f = "useCallback"
251257

252-
@module("react")
258+
@module("react") @deprecated("Please use useCallback instead")
253259
external useCallback2: ('f, ('a, 'b)) => 'f = "useCallback"
254260

255-
@module("react")
261+
@module("react") @deprecated("Please use useCallback instead")
256262
external useCallback3: ('f, ('a, 'b, 'c)) => 'f = "useCallback"
257263

258-
@module("react")
264+
@module("react") @deprecated("Please use useCallback instead")
259265
external useCallback4: ('f, ('a, 'b, 'c, 'd)) => 'f = "useCallback"
260266

261-
@module("react")
267+
@module("react") @deprecated("Please use useCallback instead")
262268
external useCallback5: ('f, ('a, 'b, 'c, 'd, 'e)) => 'f = "useCallback"
263269

264-
@module("react")
265-
external useCallback6: ('f, ('a, 'b, 'c, 'd, 'e, 'f)) => 'f = "useCallback"
270+
@module("react") @deprecated("Please use useCallback instead")
271+
external useCallback6: ('callback, ('a, 'b, 'c, 'd, 'e, 'f)) => 'callback = "useCallback"
266272

267-
@module("react")
268-
external useCallback7: ('f, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'f = "useCallback"
273+
@module("react") @deprecated("Please use useCallback instead")
274+
external useCallback7: ('callback, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'callback = "useCallback"
269275

270276
@module("react")
271277
external useContext: Context.t<'any> => 'any = "useContext"
272278

273279
@module("react") external useRef: 'value => ref<'value> = "useRef"
274280

275281
@module("react")
282+
external useImperativeHandleOnEveryRender: (
283+
Js.Nullable.t<ref<'value>>,
284+
@uncurry (unit => 'value),
285+
) => unit = "useImperativeHandle"
286+
287+
@module("react")
288+
external useImperativeHandle: (
289+
Js.Nullable.t<ref<'value>>,
290+
@uncurry (unit => 'value),
291+
'deps,
292+
) => unit = "useImperativeHandle"
293+
294+
@module("react")
295+
@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
276296
external useImperativeHandle0: (
277297
Js.Nullable.t<ref<'value>>,
278298
@uncurry (unit => 'value),
279299
@as(json`[]`) _,
280300
) => unit = "useImperativeHandle"
281301

282302
@module("react")
303+
@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
283304
external useImperativeHandle1: (
284305
Js.Nullable.t<ref<'value>>,
285306
@uncurry (unit => 'value),
286307
array<'a>,
287308
) => unit = "useImperativeHandle"
288309

289310
@module("react")
311+
@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
290312
external useImperativeHandle2: (
291313
Js.Nullable.t<ref<'value>>,
292314
@uncurry (unit => 'value),
293315
('a, 'b),
294316
) => unit = "useImperativeHandle"
295317

296318
@module("react")
319+
@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
297320
external useImperativeHandle3: (
298321
Js.Nullable.t<ref<'value>>,
299322
@uncurry (unit => 'value),
300323
('a, 'b, 'c),
301324
) => unit = "useImperativeHandle"
302325

303326
@module("react")
327+
@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
304328
external useImperativeHandle4: (
305329
Js.Nullable.t<ref<'value>>,
306330
@uncurry (unit => 'value),
307331
('a, 'b, 'c, 'd),
308332
) => unit = "useImperativeHandle"
309333

310334
@module("react")
335+
@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
311336
external useImperativeHandle5: (
312337
Js.Nullable.t<ref<'value>>,
313338
@uncurry (unit => 'value),
314339
('a, 'b, 'c, 'd, 'e),
315340
) => unit = "useImperativeHandle"
316341

317342
@module("react")
343+
@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
318344
external useImperativeHandle6: (
319345
Js.Nullable.t<ref<'value>>,
320346
@uncurry (unit => 'value),
321347
('a, 'b, 'c, 'd, 'e, 'f),
322348
) => unit = "useImperativeHandle"
323349

324350
@module("react")
351+
@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
325352
external useImperativeHandle7: (
326353
Js.Nullable.t<ref<'value>>,
327354
@uncurry (unit => 'value),
@@ -336,34 +363,45 @@ external useImperativeHandle7: (
336363
external useTransition: unit => (bool, (. unit => unit) => unit) = "useTransition"
337364

338365
@module("react")
339-
external useInsertionEffect: (@uncurry (unit => option<unit => unit>)) => unit =
366+
external useInsertionEffectOnEveryRender: (@uncurry (unit => option<unit => unit>)) => unit =
340367
"useInsertionEffect"
341368
@module("react")
369+
external useInsertionEffect: (@uncurry (unit => option<unit => unit>), 'deps) => unit =
370+
"useInsertionEffect"
371+
@module("react")
372+
@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
342373
external useInsertionEffect0: (@uncurry (unit => option<unit => unit>), @as(json`[]`) _) => unit =
343374
"useInsertionEffect"
344375
@module("react")
376+
@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
345377
external useInsertionEffect1: (@uncurry (unit => option<unit => unit>), array<'a>) => unit =
346378
"useInsertionEffect"
347379
@module("react")
380+
@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
348381
external useInsertionEffect2: (@uncurry (unit => option<unit => unit>), ('a, 'b)) => unit =
349382
"useInsertionEffect"
350383
@module("react")
384+
@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
351385
external useInsertionEffect3: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c)) => unit =
352386
"useInsertionEffect"
353387
@module("react")
388+
@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
354389
external useInsertionEffect4: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd)) => unit =
355390
"useInsertionEffect"
356391
@module("react")
392+
@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
357393
external useInsertionEffect5: (
358394
@uncurry (unit => option<unit => unit>),
359395
('a, 'b, 'c, 'd, 'e),
360396
) => unit = "useInsertionEffect"
361397
@module("react")
398+
@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
362399
external useInsertionEffect6: (
363400
@uncurry (unit => option<unit => unit>),
364401
('a, 'b, 'c, 'd, 'e, 'f),
365402
) => unit = "useInsertionEffect"
366403
@module("react")
404+
@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
367405
external useInsertionEffect7: (
368406
@uncurry (unit => option<unit => unit>),
369407
('a, 'b, 'c, 'd, 'e, 'f, 'g),
@@ -401,31 +439,31 @@ module Uncurried = {
401439
) => ('state, (. 'action) => unit) = "useReducer"
402440

403441
@module("react")
404-
external useCallback: 'f => 'f = "useCallback"
442+
external useCallback: ('f, 'deps) => 'f = "useCallback"
405443

406-
@module("react")
444+
@module("react") @deprecated("Please use useCallback instead")
407445
external useCallback0: ('f, @as(json`[]`) _) => 'f = "useCallback"
408446

409-
@module("react")
447+
@module("react") @deprecated("Please use useCallback instead")
410448
external useCallback1: ('f, array<'a>) => 'f = "useCallback"
411449

412-
@module("react")
450+
@module("react") @deprecated("Please use useCallback instead")
413451
external useCallback2: ('f, ('a, 'b)) => 'f = "useCallback"
414452

415-
@module("react")
453+
@module("react") @deprecated("Please use useCallback instead")
416454
external useCallback3: ('f, ('a, 'b, 'c)) => 'f = "useCallback"
417455

418-
@module("react")
456+
@module("react") @deprecated("Please use useCallback instead")
419457
external useCallback4: ('f, ('a, 'b, 'c, 'd)) => 'f = "useCallback"
420458

421-
@module("react")
459+
@module("react") @deprecated("Please use useCallback instead")
422460
external useCallback5: ('f, ('a, 'b, 'c, 'd, 'e)) => 'f = "useCallback"
423461

424-
@module("react")
425-
external useCallback6: ('f, ('a, 'b, 'c, 'd, 'e, 'f)) => 'f = "useCallback"
462+
@module("react") @deprecated("Please use useCallback instead")
463+
external useCallback6: ('callback, ('a, 'b, 'c, 'd, 'e, 'f)) => 'callback = "useCallback"
426464

427-
@module("react")
428-
external useCallback7: ('f, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'f = "useCallback"
465+
@module("react") @deprecated("Please use useCallback instead")
466+
external useCallback7: ('callback, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'callback = "useCallback"
429467
}
430468

431469
@set

‎src/RescriptReactRouter.res‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ let arrayToList = a => {
6262
let pathParse = str =>
6363
switch str {
6464
| ""
65-
| "/" => list{}
65+
| "/" =>
66+
list{}
6667
| raw =>
6768
/* remove the preceeding /, which every pathname seems to have */
6869
let raw = Js.String.sliceToEnd(~from=1, raw)
@@ -190,7 +191,7 @@ let useUrl = (~serverUrl=?, ()) => {
190191
}
191192
)
192193

193-
React.useEffect0(() => {
194+
React.useEffect(() => {
194195
let watcherId = watchUrl(url => setUrl(_ => url))
195196

196197
// check for updates that may have occured between the initial state and
@@ -201,7 +202,7 @@ let useUrl = (~serverUrl=?, ()) => {
201202
}
202203

203204
Some(() => unwatchUrl(watcherId))
204-
})
205+
}, [])
205206

206207
url
207208
}

0 commit comments

Comments
 (0)