Skip to content

Commit

Permalink
Flip tuple order of useTransition
Browse files Browse the repository at this point in the history
  • Loading branch information
rickhanlonii committed Mar 11, 2021
1 parent 60182d6 commit dc3c2fb
Show file tree
Hide file tree
Showing 14 changed files with 53 additions and 55 deletions.
Original file line number Diff line number Diff line change
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
6 changes: 4 additions & 2 deletions packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
Original file line number Diff line number Diff line change
Expand Up @@ -253,12 +253,14 @@ export default {
}
}
} else if (name === 'useTransition') {
// Only consider second value in initializing tuple stable.
if (
id.type === 'ArrayPattern' &&
id.elements.length === 2 &&
Array.isArray(resolved.identifiers)
) {
// Is first tuple value the same reference we're checking?
if (id.elements[0] === resolved.identifiers[0]) {
// Is second tuple value the same reference we're checking?g
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
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,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 @@ -282,7 +282,7 @@ function useTransition(): [(() => void) => void, boolean] {
stackError: new Error(),
value: undefined,
});
return [callback => {}, false];
return [false, callback => {}];
}

function useDeferredValue<T>(value: T): T {
Expand Down
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
Expand Up @@ -473,12 +473,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
Original file line number Diff line number Diff line change
Expand Up @@ -1728,27 +1728,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 @@ -2294,7 +2294,7 @@ if (__DEV__) {
mountHookTypesDev();
return mountDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
mountHookTypesDev();
return mountTransition();
Expand Down Expand Up @@ -2424,7 +2424,7 @@ if (__DEV__) {
updateHookTypesDev();
return mountDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return mountTransition();
Expand Down Expand Up @@ -2554,7 +2554,7 @@ if (__DEV__) {
updateHookTypesDev();
return updateDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return updateTransition();
Expand Down Expand Up @@ -2685,7 +2685,7 @@ if (__DEV__) {
updateHookTypesDev();
return rerenderDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return rerenderTransition();
Expand Down Expand Up @@ -2827,7 +2827,7 @@ if (__DEV__) {
mountHookTypesDev();
return mountDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
mountHookTypesDev();
Expand Down Expand Up @@ -2972,7 +2972,7 @@ if (__DEV__) {
updateHookTypesDev();
return updateDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
updateHookTypesDev();
Expand Down Expand Up @@ -3118,7 +3118,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
Original file line number Diff line number Diff line change
Expand Up @@ -1728,27 +1728,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 @@ -2294,7 +2294,7 @@ if (__DEV__) {
mountHookTypesDev();
return mountDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
mountHookTypesDev();
return mountTransition();
Expand Down Expand Up @@ -2424,7 +2424,7 @@ if (__DEV__) {
updateHookTypesDev();
return mountDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return mountTransition();
Expand Down Expand Up @@ -2554,7 +2554,7 @@ if (__DEV__) {
updateHookTypesDev();
return updateDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return updateTransition();
Expand Down Expand Up @@ -2685,7 +2685,7 @@ if (__DEV__) {
updateHookTypesDev();
return rerenderDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return rerenderTransition();
Expand Down Expand Up @@ -2827,7 +2827,7 @@ if (__DEV__) {
mountHookTypesDev();
return mountDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
mountHookTypesDev();
Expand Down Expand Up @@ -2972,7 +2972,7 @@ if (__DEV__) {
updateHookTypesDev();
return updateDeferredValue(value);
},
useTransition(): [(() => void) => void, boolean] {
useTransition(): [boolean, (() => void) => void] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
updateHookTypesDev();
Expand Down Expand Up @@ -3118,7 +3118,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
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
Expand Up @@ -832,7 +832,8 @@ describe('ReactHooksWithNoopRenderer', () => {
let startTransition;
function App() {
const [counter, setCounter] = useState(0);
const [_startTransition] = useTransition();
// eslint-disable-next-line no-unused-vars
const [_, _startTransition] = useTransition();
startTransition = _startTransition;

if (counter === 0) {
Expand Down Expand Up @@ -3140,9 +3141,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
Original file line number Diff line number Diff line change
Expand Up @@ -3526,7 +3526,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 @@ -3624,12 +3625,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
Original file line number Diff line number Diff line change
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
2 changes: 1 addition & 1 deletion packages/react/src/ReactHooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,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

0 comments on commit dc3c2fb

Please sign in to comment.