Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flip tuple order of useTransition #20976

Merged
merged 1 commit into from Apr 20, 2021
Merged

Flip tuple order of useTransition #20976

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
View file
Open in desktop
Expand Up @@ -604,10 +604,10 @@ const tests = {
const [state4, dispatch2] = React.useReducer();
const [state5, maybeSetState] = useFunnyState();
const [state6, maybeDispatch] = useFunnyReducer();
const [startTransition1] = useTransition();
const [startTransition2, isPending2] = useTransition();
const [startTransition3] = React.useTransition();
const [startTransition4, isPending4] = React.useTransition();
const [isPending1] = useTransition();
const [isPending2, startTransition2] = useTransition();
const [isPending3] = React.useTransition();
const [isPending4, startTransition4] = React.useTransition();
const mySetState = useCallback(() => {}, []);
let myDispatch = useCallback(() => {}, []);
Expand Down
11 changes: 8 additions & 3 deletions packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
View file
Open in desktop
Expand Up @@ -255,9 +255,14 @@ export default {
}
}
} else if (name === 'useTransition') {
if (id.type === 'ArrayPattern' && isArray(resolved.identifiers)) {
// Is first tuple value the same reference we're checking?
if (id.elements[0] === resolved.identifiers[0]) {
// Only consider second value in initializing tuple stable.
if (
id.type === 'ArrayPattern' &&
id.elements.length === 2 &&
Array.isArray(resolved.identifiers)
) {
// Is second tuple value the same reference we're checking?
if (id.elements[1] === resolved.identifiers[0]) {
// Setter is stable.
return true;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/react-debug-tools/src/ReactDebugHooks.js
View file
Open in desktop
Expand Up @@ -265,7 +265,7 @@ function useMutableSource<Source, Snapshot>(
return value;
}

function useTransition(): [(() => void) => void, boolean] {
function useTransition(): [boolean, (() => void) => void] {
// useTransition() composes multiple hooks internally.
// Advance the current hook index the same number of times
// so that subsequent hooks have the right memoized state.
Expand All @@ -276,7 +276,7 @@ function useTransition(): [(() => void) => void, boolean] {
stackError: new Error(),
value: undefined,
rickhanlonii marked this conversation as resolved.
Show resolved Hide resolved
});
return [callback => {}, false];
return [false, callback => {}];
}

function useDeferredValue<T>(value: T): T {
Expand Down
4 changes: 2 additions & 2 deletions ...ct-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
View file
Open in desktop
Expand Up @@ -41,8 +41,8 @@ export default function InspectedElementErrorsAndWarningsTree({
const refresh = useCacheRefresh();

const [
startClearErrorsTransition,
isErrorsTransitionPending,
startClearErrorsTransition,
] = useTransition();
const clearErrorsForInspectedElement = () => {
const {id} = inspectedElement;
Expand All @@ -60,8 +60,8 @@ export default function InspectedElementErrorsAndWarningsTree({
};

const [
startClearWarningsTransition,
isWarningsTransitionPending,
startClearWarningsTransition,
] = useTransition();
const clearWarningsForInspectedElement = () => {
const {id} = inspectedElement;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
View file
Open in desktop
Expand Up @@ -90,7 +90,7 @@ export default function KeyValue({
isReadOnly = value[meta.readonly];
}

const [startInspectPathsTransition, isInspectPathsPending] = useTransition();
const [isInspectPathsPending, startInspectPathsTransition] = useTransition();
const toggleIsOpen = () => {
if (isOpen) {
setIsOpen(false);
Expand Down
4 changes: 2 additions & 2 deletions packages/react-dom/src/server/ReactPartialRendererHooks.js
View file
Open in desktop
Expand Up @@ -467,12 +467,12 @@ function useDeferredValue<T>(value: T): T {
return value;
}

function useTransition(): [(callback: () => void) => void, boolean] {
function useTransition(): [boolean, (callback: () => void) => void] {
resolveCurrentlyRenderingComponent();
const startTransition = callback => {
callback();
};
return [startTransition, false];
return [false, startTransition];
}

function useOpaqueIdentifier(): OpaqueIDType {
Expand Down
26 changes: 13 additions & 13 deletions packages/react-reconciler/src/ReactFiberHooks.new.js
View file
Open in desktop
Expand Up @@ -1723,27 +1723,27 @@ function startTransition(setPending, callback) {
}
}

function mountTransition(): [(() => void) => void, boolean] {
function mountTransition(): [boolean, (() => void) => void] {
const [isPending, setPending] = mountState(false);
// The `start` method never changes.
const start = startTransition.bind(null, setPending);
const hook = mountWorkInProgressHook();
hook.memoizedState = start;
return [start, isPending];
return [isPending, start];
}

function updateTransition(): [(() => void) => void, boolean] {
function updateTransition(): [boolean, (() => void) => void] {
const [isPending] = updateState(false);
const hook = updateWorkInProgressHook();
const start = hook.memoizedState;
return [start, isPending];
return [isPending, start];
}

function rerenderTransition(): [(() => void) => void, boolean] {
function rerenderTransition(): [boolean, (() => void) => void] {
const [isPending] = rerenderState(false);
const hook = updateWorkInProgressHook();
const start = hook.memoizedState;
return [start, isPending];
return [isPending, start];
}

let isUpdatingOpaqueValueInRenderPhase = false;
Expand Down Expand Up @@ -2283,7 +2283,7 @@ if (__DEV__) {
mountHookTypesDev();
return mountDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
mountHookTypesDev();
return mountTransition();
Expand Down Expand Up @@ -2407,7 +2407,7 @@ if (__DEV__) {
updateHookTypesDev();
return mountDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return mountTransition();
Expand Down Expand Up @@ -2531,7 +2531,7 @@ if (__DEV__) {
updateHookTypesDev();
return updateDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return updateTransition();
Expand Down Expand Up @@ -2656,7 +2656,7 @@ if (__DEV__) {
updateHookTypesDev();
return rerenderDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return rerenderTransition();
Expand Down Expand Up @@ -2792,7 +2792,7 @@ if (__DEV__) {
mountHookTypesDev();
return mountDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
mountHookTypesDev();
Expand Down Expand Up @@ -2931,7 +2931,7 @@ if (__DEV__) {
updateHookTypesDev();
return updateDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
updateHookTypesDev();
Expand Down Expand Up @@ -3071,7 +3071,7 @@ if (__DEV__) {
updateHookTypesDev();
return rerenderDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
updateHookTypesDev();
Expand Down
26 changes: 13 additions & 13 deletions packages/react-reconciler/src/ReactFiberHooks.old.js
View file
Open in desktop
Expand Up @@ -1723,27 +1723,27 @@ function startTransition(setPending, callback) {
}
}

function mountTransition(): [(() => void) => void, boolean] {
function mountTransition(): [boolean, (() => void) => void] {
const [isPending, setPending] = mountState(false);
// The `start` method never changes.
const start = startTransition.bind(null, setPending);
const hook = mountWorkInProgressHook();
hook.memoizedState = start;
return [start, isPending];
return [isPending, start];
}

function updateTransition(): [(() => void) => void, boolean] {
function updateTransition(): [boolean, (() => void) => void] {
const [isPending] = updateState(false);
const hook = updateWorkInProgressHook();
const start = hook.memoizedState;
return [start, isPending];
return [isPending, start];
}

function rerenderTransition(): [(() => void) => void, boolean] {
function rerenderTransition(): [boolean, (() => void) => void] {
const [isPending] = rerenderState(false);
const hook = updateWorkInProgressHook();
const start = hook.memoizedState;
return [start, isPending];
return [isPending, start];
}

let isUpdatingOpaqueValueInRenderPhase = false;
Expand Down Expand Up @@ -2283,7 +2283,7 @@ if (__DEV__) {
mountHookTypesDev();
return mountDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
mountHookTypesDev();
return mountTransition();
Expand Down Expand Up @@ -2407,7 +2407,7 @@ if (__DEV__) {
updateHookTypesDev();
return mountDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return mountTransition();
Expand Down Expand Up @@ -2531,7 +2531,7 @@ if (__DEV__) {
updateHookTypesDev();
return updateDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return updateTransition();
Expand Down Expand Up @@ -2656,7 +2656,7 @@ if (__DEV__) {
updateHookTypesDev();
return rerenderDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return rerenderTransition();
Expand Down Expand Up @@ -2792,7 +2792,7 @@ if (__DEV__) {
mountHookTypesDev();
return mountDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
mountHookTypesDev();
Expand Down Expand Up @@ -2931,7 +2931,7 @@ if (__DEV__) {
updateHookTypesDev();
return updateDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
updateHookTypesDev();
Expand Down Expand Up @@ -3071,7 +3071,7 @@ if (__DEV__) {
updateHookTypesDev();
return rerenderDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
updateHookTypesDev();
Expand Down
2 changes: 1 addition & 1 deletion packages/react-reconciler/src/ReactInternalTypes.js
View file
Open in desktop
Expand Up @@ -311,7 +311,7 @@ export type Dispatcher = {|
): void,
useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void,
useDeferredValue<T>(value: T): T,
useTransition(): [(() => void) => void, boolean],
useTransition(): [boolean, (() => void) => void],
useMutableSource<Source, Snapshot>(
source: MutableSource<Source>,
getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
Expand Down
2 changes: 1 addition & 1 deletion packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
View file
Open in desktop
Expand Up @@ -1511,7 +1511,7 @@ describe('ReactHooks', () => {
];

if (__EXPERIMENTAL__) {
const useTransitionHelper = () => React.useTransition({timeoutMs: 1000});
const useTransitionHelper = () => React.useTransition();
const useDeferredValueHelper = () =>
React.useDeferredValue(0, {timeoutMs: 1000});

Expand Down
9 changes: 2 additions & 7 deletions packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
View file
Open in desktop
Expand Up @@ -876,14 +876,11 @@ describe('ReactHooksWithNoopRenderer', () => {
// TODO: This should probably warn
// @gate experimental
it('calling startTransition inside render phase', async () => {
let startTransition;
function App() {
const [counter, setCounter] = useState(0);
const [_startTransition] = useTransition();
startTransition = _startTransition;

if (counter === 0) {
startTransition(() => {
React.unstable_startTransition(() => {
setCounter(c => c + 1);
});
}
Expand Down Expand Up @@ -3227,9 +3224,7 @@ describe('ReactHooksWithNoopRenderer', () => {
let transition;
function App() {
const [show, setShow] = useState(false);
const [startTransition, isPending] = useTransition({
timeoutMs: 1000,
});
const [isPending, startTransition] = useTransition();
transition = () => {
startTransition(() => {
setShow(true);
Expand Down
11 changes: 4 additions & 7 deletions packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
View file
Open in desktop
Expand Up @@ -3745,7 +3745,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {
let startTransition;
function B() {
const [textB, _setTextB] = useState('B');
const [_startTransition] = useTransition({timeoutMs: 10000});
// eslint-disable-next-line no-unused-vars
const [_, _startTransition] = useTransition();
startTransition = _startTransition;
setTextB = _setTextB;
return (
Expand Down Expand Up @@ -3843,12 +3844,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {
let setTextWithLongTransition;

function App() {
const [startShortTransition, isPending1] = React.unstable_useTransition({
timeoutMs: 5000,
});
const [startLongTransition, isPending2] = React.unstable_useTransition({
timeoutMs: 30000,
});
const [isPending1, startShortTransition] = React.unstable_useTransition();
const [isPending2, startLongTransition] = React.unstable_useTransition();
const isPending = isPending1 || isPending2;
const [text, setText] = React.useState('');
const [mirror, setMirror] = React.useState('');
Expand Down
4 changes: 2 additions & 2 deletions packages/react-reconciler/src/__tests__/ReactTransition-test.js
View file
Open in desktop
Expand Up @@ -164,7 +164,7 @@ describe('ReactTransition', () => {
let start;
function App() {
const [show, setShow] = useState(false);
const [_start, isPending] = useTransition();
const [isPending, _start] = useTransition();
start = () => _start(() => setShow(true));
return (
<Suspense fallback={<Text text="Loading..." />}>
Expand Down Expand Up @@ -208,7 +208,7 @@ describe('ReactTransition', () => {
async () => {
let update;
function App() {
const [startContentChange, isContentPending] = useTransition();
const [isContentPending, startContentChange] = useTransition();
const [label, setLabel] = useState('A');
const [contents, setContents] = useState('A');
update = value => {
Expand Down
4 changes: 2 additions & 2 deletions packages/react-server/src/ReactFizzHooks.js
View file
Open in desktop
Expand Up @@ -470,9 +470,9 @@ function unsupportedStartTransition() {
invariant(false, 'startTransition cannot be called during server rendering.');
}

function useTransition(): [(callback: () => void) => void, boolean] {
function useTransition(): [boolean, (callback: () => void) => void] {
resolveCurrentlyRenderingComponent();
return [unsupportedStartTransition, false];
return [false, unsupportedStartTransition];
}

function useOpaqueIdentifier(): OpaqueIDType {
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/ReactHooks.js
View file
Open in desktop
Expand Up @@ -145,7 +145,7 @@ export function useDebugValue<T>(

export const emptyObject = {};

export function useTransition(): [(() => void) => void, boolean] {
export function useTransition(): [boolean, (() => void) => void] {
const dispatcher = resolveDispatcher();
return dispatcher.useTransition();
}
Expand Down