mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Nick Gerleman
03b4764836
Summary: This diff is part of an overall stack, meant to fix incorrect usage of `setState()` in `VirtualizedList`, which triggers new invariant checks added in `VirtualizedList_EXPERIMENTAL`. See the stack summary below for more information on the broader change. ## Diff Summary This moves public VirtualizedList types to a new file, shared between both `VirtualizedList`, and `VirtualizedList_EXPERIMENTAL`. This allows us to make public interface changes in a single place. ## Stack Summary `VirtualizedList`'s component state is a set of cells to render. This state is set via the `setState()` class component API. The main "tick" function `VirtualizedList._updateCellsToRender()` calculates this new state using a combination of the current component state, and instance-local state like maps, measurement caches, etc. From: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous --- > React may batch multiple setState() calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. For example, this code may fail to update the counter: ``` // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); ``` > To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument: ``` // Correct this.setState((state, props) => ({ counter: state.counter + props.increment })); ``` --- `_updateCellsToRender()` transitively calls many functions which will read directly from `this.props` or `this.state` instead of the value passed by the state updater. This intermittently fires invariant violations, when there is a mismatch. This diff migrates all usages of `props` and `state` during state update to the values provied in `setState()`. To prevent future mismatch, and to provide better clarity on when it is safe to use `this.props`, `this.state`, I overrode `setState` to fire an invariant violation if it is accessed when it is unsafe to: {F756963772} Changelog: [Internal][Changed] - Move Props to VirtualizedListProps Reviewed By: genkikondo Differential Revision: D38293585 fbshipit-source-id: 344d94466a2741ee67eb5754de5506eb3e265c5b
73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import * as React from 'react';
|
|
import type VirtualizedList from './VirtualizedList';
|
|
import type {Props as VirtualizedListProps} from './VirtualizedListProps';
|
|
import invariant from 'invariant';
|
|
|
|
export type ListImplementation = React.ComponentType<VirtualizedListProps> &
|
|
interface {};
|
|
|
|
/**
|
|
* Global override to the VirtualizedList implementation used when imported
|
|
*/
|
|
let injection: ?ListImplementation;
|
|
let retrieved = false;
|
|
|
|
export function inject(listImplementation: ListImplementation): void {
|
|
invariant(
|
|
!retrieved,
|
|
'VirtualizedListInjection.inject() called after the injection was already retrieved',
|
|
);
|
|
injection = listImplementation;
|
|
}
|
|
|
|
export function getOrDefault(
|
|
defaultImplementation: Class<VirtualizedList>,
|
|
): Class<VirtualizedList> {
|
|
retrieved = true;
|
|
return injection
|
|
? verifyVirtualizedList(injection, defaultImplementation)
|
|
: defaultImplementation;
|
|
}
|
|
|
|
function verifyVirtualizedList(
|
|
injectedImplementation: ListImplementation,
|
|
defaultImplementation: Class<VirtualizedList>,
|
|
): Class<VirtualizedList> {
|
|
// The original VirtualizedList marks method as "private by convention" by
|
|
// prefixing with underscore. These methods may still be called at runtime
|
|
// by tests or other internals, so they cannot be truly private, and will be
|
|
// included in the Flow type of VirtualizedList.
|
|
// Allow the injection to have different private methods by allowing a loose
|
|
// Flow type, but check at runtime that the set of public properties matches.
|
|
if (__DEV__) {
|
|
for (const field of Object.keys(defaultImplementation)) {
|
|
if (isPublicField(field)) {
|
|
invariant(
|
|
injectedImplementation.hasOwnProperty(field),
|
|
`VirtualizedList injection missing field: "${field}"`,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
// $FlowExpectedError
|
|
return injectedImplementation;
|
|
}
|
|
|
|
function isPublicField(fieldName: string): boolean {
|
|
// Respect JSTransform public methods by double underscore (D33982339)
|
|
return fieldName.length > 0 && (fieldName[0] !== '_' || fieldName[1] === '_');
|
|
}
|