next.d.ts 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /**
  2. * These are types for things that are present in the upcoming React 18 release.
  3. *
  4. * Once React 18 is released they can just be moved to the main index file.
  5. *
  6. * To load the types declared here in an actual project, there are three ways. The easiest one,
  7. * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
  8. * is to add `"react/next"` to the `"types"` array.
  9. *
  10. * Alternatively, a specific import syntax can to be used from a typescript file.
  11. * This module does not exist in reality, which is why the {} is important:
  12. *
  13. * ```ts
  14. * import {} from 'react/next'
  15. * ```
  16. *
  17. * It is also possible to include it through a triple-slash reference:
  18. *
  19. * ```ts
  20. * /// <reference types="react/next" />
  21. * ```
  22. *
  23. * Either the import or the reference only needs to appear once, anywhere in the project.
  24. */
  25. // See https://github.com/facebook/react/blob/master/packages/react/src/React.js to see how the exports are declared,
  26. import React = require('.');
  27. export {};
  28. declare const UNDEFINED_VOID_ONLY: unique symbol;
  29. type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
  30. declare module '.' {
  31. export interface SuspenseProps {
  32. /**
  33. * The presence of this prop indicates that the content is computationally expensive to render.
  34. * In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data).
  35. * @see {@link https://github.com/facebook/react/pull/19936}
  36. */
  37. unstable_expectedLoadTime?: number | undefined;
  38. }
  39. // must be synchronous
  40. export type TransitionFunction = () => VoidOrUndefinedOnly;
  41. // strange definition to allow vscode to show documentation on the invocation
  42. export interface TransitionStartFunction {
  43. /**
  44. * State updates caused inside the callback are allowed to be deferred.
  45. *
  46. * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
  47. *
  48. * @param callback A _synchronous_ function which causes state updates that can be deferred.
  49. */
  50. (callback: TransitionFunction): void;
  51. }
  52. /**
  53. * Returns a deferred version of the value that may “lag behind” it for at most `timeoutMs`.
  54. *
  55. * This is commonly used to keep the interface responsive when you have something that renders immediately
  56. * based on user input and something that needs to wait for a data fetch.
  57. *
  58. * A good example of this is a text input.
  59. *
  60. * @param value The value that is going to be deferred
  61. *
  62. * @see https://reactjs.org/docs/concurrent-mode-reference.html#usedeferredvalue
  63. */
  64. export function useDeferredValue<T>(value: T): T;
  65. /**
  66. * Allows components to avoid undesirable loading states by waiting for content to load
  67. * before transitioning to the next screen. It also allows components to defer slower,
  68. * data fetching updates until subsequent renders so that more crucial updates can be
  69. * rendered immediately.
  70. *
  71. * The `useTransition` hook returns two values in an array.
  72. *
  73. * The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish.
  74. * The second is a function that takes a callback. We can use it to tell React which state we want to defer.
  75. *
  76. * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
  77. *
  78. * @param config An optional object with `timeoutMs`
  79. *
  80. * @see https://reactjs.org/docs/concurrent-mode-reference.html#usetransition
  81. */
  82. export function useTransition(): [boolean, TransitionStartFunction];
  83. /**
  84. * Similar to `useTransition` but allows uses where hooks are not available.
  85. *
  86. * @param callback A _synchronous_ function which causes state updates that can be deferred.
  87. */
  88. export function startTransition(scope: TransitionFunction): void;
  89. export function useId(): string;
  90. /**
  91. * this should be an internal type
  92. */
  93. interface MutableSource<T> {
  94. _source: T;
  95. }
  96. export type MutableSourceSubscribe<T> = (source: T, callback: () => void) => () => void;
  97. /**
  98. * @param source A source could be anything as long as they can be subscribed to and have a "version".
  99. * @param getVersion A function returns a value which will change whenever part of the source changes.
  100. */
  101. export function unstable_createMutableSource<T>(source: T, getVersion: () => any): MutableSource<T>;
  102. /**
  103. * useMutableSource() enables React components to safely and efficiently read from a mutable external source in Concurrent Mode.
  104. * The API will detect mutations that occur during a render to avoid tearing
  105. * and it will automatically schedule updates when the source is mutated.
  106. * @param MutableSource
  107. * @param getSnapshot
  108. * @param subscribe
  109. *
  110. * @see https://github.com/reactjs/rfcs/blob/master/text/0147-use-mutable-source.md
  111. */
  112. export function unstable_useMutableSource<T, TResult extends unknown>(MutableSource: MutableSource<T>, getSnapshot: (source: T) => TResult, subscribe: MutableSourceSubscribe<T>): TResult;
  113. /**
  114. * @param subscribe
  115. * @param getSnapshot
  116. *
  117. * @see https://github.com/reactwg/react-18/discussions/86
  118. */
  119. // keep in sync with `useSyncExternalStore` from `use-sync-external-store`
  120. export function useSyncExternalStore<Snapshot>(
  121. subscribe: (onStoreChange: () => void) => () => void,
  122. getSnapshot: () => Snapshot,
  123. getServerSnapshot?: () => Snapshot,
  124. ): Snapshot;
  125. }