mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Rubén Norte
80ce3c7fe2
Summary: In development, we can specify a debug name to force the whole React tree to have a meaningful name. This is useful for debugging: React DevTools, component stack traces, etc. More context in D26637787 (https://github.com/facebook/react-native/commit/eeb36f470929c2fdd8e1ed69898a5ba9144b8715). This worked fine until now because `renderApplication` is never called more than once per React Native root. With pre-rendering, this won't be true as we'll be able to re-render the whole React tree with new props (after navigating to the screen). The problem with the current implementation is that we generate a new component every time `renderApplication` is called, which makes the React reconciliation consider them different components and discards the whole sub-tree. This fixes it by caching those components so we always return a component with the same identity (exactly the same function) when we call `renderApplication` repeatedly. This won't have any effect in production where these components aren't created at all. Changelog: [Internal] Reviewed By: ShikaSD Differential Revision: D28061384 fbshipit-source-id: 95833a5b74bb622896cb47426f74324d8740e5d7
33 lines
839 B
JavaScript
33 lines
839 B
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its 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
|
|
* @format
|
|
*/
|
|
|
|
import type {AbstractComponent, Node} from 'react';
|
|
|
|
type NoopComponent = AbstractComponent<{children: Node}>;
|
|
|
|
const cache: Map<
|
|
string, // displayName
|
|
NoopComponent, // ComponentWithDisplayName
|
|
> = new Map();
|
|
|
|
export default function getCachedComponentWithDisplayName(
|
|
displayName: string,
|
|
): NoopComponent {
|
|
let ComponentWithDisplayName = cache.get(displayName);
|
|
|
|
if (!ComponentWithDisplayName) {
|
|
ComponentWithDisplayName = ({children}) => children;
|
|
ComponentWithDisplayName.displayName = displayName;
|
|
cache.set(displayName, ComponentWithDisplayName);
|
|
}
|
|
|
|
return ComponentWithDisplayName;
|
|
}
|