@samitouri / QOS-React / commits / 40a521aa72

Terminology: Functional -> Function Component (#13775)

* Terminology: Functional -> Function Component * Drop the "stateless" (functions are already stateless, right?)

Dan Abramov committed Oct 4, 2018 at 22:44 UTC 40a521aa7247872d0080d5a581120b64998152da
30 files changed +157 -165
packages/react-dom/src/__tests__/ReactDOM-test.js
+1 -1
@@ -387,7 +387,7 @@ describe('ReactDOM', () => {
387 }
388 });
389
390 - it('should not crash calling findDOMNode inside a functional component', () => {
390 + it('should not crash calling findDOMNode inside a function component', () => {
391 const container = document.createElement('div');
392
393 class Component extends React.Component {
packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
+2 -2
@@ -623,8 +623,8 @@ describe('ReactDOMServerIntegration', () => {
623 }
624
625 itRenders('stateless components', async render => {
626 - const StatelessComponent = () => <div>foo</div>;
627 - checkFooDiv(await render(<StatelessComponent />));
626 + const FunctionComponent = () => <div>foo</div>;
627 + checkFooDiv(await render(<FunctionComponent />));
628 });
629
630 itRenders('ES6 class components', async render => {
packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js
+8 -8
@@ -76,14 +76,14 @@ describe('ReactDOMServerIntegration', () => {
76 });
77
78 itRenders('stateless child with context', async render => {
79 - function StatelessChildWithContext(props, context) {
79 + function FunctionChildWithContext(props, context) {
80 return <div>{context.text}</div>;
81 }
82 - StatelessChildWithContext.contextTypes = {text: PropTypes.string};
82 + FunctionChildWithContext.contextTypes = {text: PropTypes.string};
83
84 const e = await render(
85 <PurpleContext>
86 - <StatelessChildWithContext />
86 + <FunctionChildWithContext />
87 </PurpleContext>,
88 );
89 expect(e.textContent).toBe('purple');
@@ -106,14 +106,14 @@ describe('ReactDOMServerIntegration', () => {
106 });
107
108 itRenders('stateless child without context', async render => {
109 - function StatelessChildWithoutContext(props, context) {
109 + function FunctionChildWithoutContext(props, context) {
110 // this should render blank; context isn't passed to this component.
111 return <div>{context.text}</div>;
112 }
113
114 const e = await render(
115 <PurpleContext>
116 - <StatelessChildWithoutContext />
116 + <FunctionChildWithoutContext />
117 </PurpleContext>,
118 );
119 expect(e.textContent).toBe('');
@@ -137,17 +137,17 @@ describe('ReactDOMServerIntegration', () => {
137 });
138
139 itRenders('stateless child with wrong context', async render => {
140 - function StatelessChildWithWrongContext(props, context) {
140 + function FunctionChildWithWrongContext(props, context) {
141 // this should render blank; context.text isn't passed to this component.
142 return <div id="statelessWrongChild">{context.text}</div>;
143 }
144 - StatelessChildWithWrongContext.contextTypes = {
144 + FunctionChildWithWrongContext.contextTypes = {
145 foo: PropTypes.string,
146 };
147
148 const e = await render(
149 <PurpleContext>
150 - <StatelessChildWithWrongContext />
150 + <FunctionChildWithWrongContext />
151 </PurpleContext>,
152 );
153 expect(e.textContent).toBe('');
packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
+4 -4
@@ -75,13 +75,13 @@ describe('ReactDOMServerIntegration', () => {
75 });
76
77 itRenders('stateless child with context', async render => {
78 - function StatelessChildWithContext(props) {
78 + function FunctionChildWithContext(props) {
79 return <Consumer>{text => text}</Consumer>;
80 }
81
82 const e = await render(
83 <PurpleContext>
84 - <StatelessChildWithContext />
84 + <FunctionChildWithContext />
85 </PurpleContext>,
86 );
87 expect(e.textContent).toBe('purple');
@@ -103,7 +103,7 @@ describe('ReactDOMServerIntegration', () => {
103 });
104
105 itRenders('stateless child with wrong context', async render => {
106 - function StatelessChildWithWrongContext(props) {
106 + function FunctionChildWithWrongContext(props) {
107 return (
108 <div id="statelessWrongChild">
109 <Consumer>{text => text}</Consumer>
@@ -111,7 +111,7 @@ describe('ReactDOMServerIntegration', () => {
111 );
112 }
113
114 - const e = await render(<StatelessChildWithWrongContext />);
114 + const e = await render(<FunctionChildWithWrongContext />);
115 expect(e.textContent).toBe('none');
116 });
117
packages/react-dom/src/__tests__/ReactFunctionComponent-test.js renamed
+34 -40
@@ -14,11 +14,11 @@ let React;
14 let ReactDOM;
15 let ReactTestUtils;
16
17 -function StatelessComponent(props) {
17 +function FunctionComponent(props) {
18 return <div>{props.name}</div>;
19 }
20
21 -describe('ReactStatelessComponent', () => {
21 +describe('ReactFunctionComponent', () => {
22 beforeEach(() => {
23 jest.resetModuleRegistry();
24 PropTypes = require('prop-types');
@@ -29,7 +29,7 @@ describe('ReactStatelessComponent', () => {
29
30 it('should render stateless component', () => {
31 const el = document.createElement('div');
32 - ReactDOM.render(<StatelessComponent name="A" />, el);
32 + ReactDOM.render(<FunctionComponent name="A" />, el);
33
34 expect(el.textContent).toBe('A');
35 });
@@ -37,7 +37,7 @@ describe('ReactStatelessComponent', () => {
37 it('should update stateless component', () => {
38 class Parent extends React.Component {
39 render() {
40 - return <StatelessComponent {...this.props} />;
40 + return <FunctionComponent {...this.props} />;
41 }
42 }
43
@@ -52,7 +52,7 @@ describe('ReactStatelessComponent', () => {
52 it('should unmount stateless component', () => {
53 const container = document.createElement('div');
54
55 - ReactDOM.render(<StatelessComponent name="A" />, container);
55 + ReactDOM.render(<FunctionComponent name="A" />, container);
56 expect(container.textContent).toBe('A');
57
58 ReactDOM.unmountComponentAtNode(container);
@@ -98,29 +98,29 @@ describe('ReactStatelessComponent', () => {
98 expect(el.textContent).toBe('mest');
99 });
100
101 - it('should warn for getDerivedStateFromProps on a functional component', () => {
102 - function StatelessComponentWithChildContext() {
101 + it('should warn for getDerivedStateFromProps on a function component', () => {
102 + function FunctionComponentWithChildContext() {
103 return null;
104 }
105 - StatelessComponentWithChildContext.getDerivedStateFromProps = function() {};
105 + FunctionComponentWithChildContext.getDerivedStateFromProps = function() {};
106
107 const container = document.createElement('div');
108
109 expect(() =>
110 - ReactDOM.render(<StatelessComponentWithChildContext />, container),
110 + ReactDOM.render(<FunctionComponentWithChildContext />, container),
111 ).toWarnDev(
112 - 'StatelessComponentWithChildContext: Stateless ' +
113 - 'functional components do not support getDerivedStateFromProps.',
112 + 'FunctionComponentWithChildContext: Function ' +
113 + 'components do not support getDerivedStateFromProps.',
114 {withoutStack: true},
115 );
116 });
117
118 - it('should warn for childContextTypes on a functional component', () => {
119 - function StatelessComponentWithChildContext(props) {
118 + it('should warn for childContextTypes on a function component', () => {
119 + function FunctionComponentWithChildContext(props) {
120 return <div>{props.name}</div>;
121 }
122
123 - StatelessComponentWithChildContext.childContextTypes = {
123 + FunctionComponentWithChildContext.childContextTypes = {
124 foo: PropTypes.string,
125 };
126
@@ -128,12 +128,12 @@ describe('ReactStatelessComponent', () => {
128
129 expect(() =>
130 ReactDOM.render(
131 - <StatelessComponentWithChildContext name="A" />,
131 + <FunctionComponentWithChildContext name="A" />,
132 container,
133 ),
134 ).toWarnDev(
135 - 'StatelessComponentWithChildContext(...): childContextTypes cannot ' +
136 - 'be defined on a functional component.',
135 + 'FunctionComponentWithChildContext(...): childContextTypes cannot ' +
136 + 'be defined on a function component.',
137 {withoutStack: true},
138 );
139 });
@@ -161,12 +161,12 @@ describe('ReactStatelessComponent', () => {
161 ReactTestUtils.renderIntoDocument(<Child test="test" />);
162 }).toThrowError(
163 __DEV__
164 - ? 'Stateless function components cannot have refs.'
164 + ? 'Function components cannot have refs.'
165 : // It happens because we don't save _owner in production for
166 - // functional components.
166 + // function components.
167 'Element ref was specified as a string (me) but no owner was set. This could happen for one of' +
168 ' the following reasons:\n' +
169 - '1. You may be adding a ref to a functional component\n' +
169 + '1. You may be adding a ref to a function component\n' +
170 "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
171 '3. You have multiple copies of React loaded\n' +
172 'See https://fb.me/react-refs-must-have-owner for more information.',
@@ -182,7 +182,7 @@ describe('ReactStatelessComponent', () => {
182 render() {
183 return (
184 <Indirection>
185 - <StatelessComponent name="A" ref="stateless" />
185 + <FunctionComponent name="A" ref="stateless" />
186 </Indirection>
187 );
188 }
@@ -191,10 +191,10 @@ describe('ReactStatelessComponent', () => {
191 expect(() =>
192 ReactTestUtils.renderIntoDocument(<ParentUsingStringRef />),
193 ).toWarnDev(
194 - 'Warning: Stateless function components cannot be given refs. ' +
194 + 'Warning: Function components cannot be given refs. ' +
195 'Attempts to access this ref will fail.\n\nCheck the render method ' +
196 'of `ParentUsingStringRef`.\n' +
197 - ' in StatelessComponent (at **)\n' +
197 + ' in FunctionComponent (at **)\n' +
198 ' in div (at **)\n' +
199 ' in Indirection (at **)\n' +
200 ' in ParentUsingStringRef (at **)',
@@ -213,7 +213,7 @@ describe('ReactStatelessComponent', () => {
213 render() {
214 return (
215 <Indirection>
216 - <StatelessComponent
216 + <FunctionComponent
217 name="A"
218 ref={arg => {
219 expect(arg).toBe(null);
@@ -227,10 +227,10 @@ describe('ReactStatelessComponent', () => {
227 expect(() =>
228 ReactTestUtils.renderIntoDocument(<ParentUsingFunctionRef />),
229 ).toWarnDev(
230 - 'Warning: Stateless function components cannot be given refs. ' +
230 + 'Warning: Function components cannot be given refs. ' +
231 'Attempts to access this ref will fail.\n\nCheck the render method ' +
232 'of `ParentUsingFunctionRef`.\n' +
233 - ' in StatelessComponent (at **)\n' +
233 + ' in FunctionComponent (at **)\n' +
234 ' in div (at **)\n' +
235 ' in Indirection (at **)\n' +
236 ' in ParentUsingFunctionRef (at **)',
@@ -244,7 +244,7 @@ describe('ReactStatelessComponent', () => {
244 // When owner uses JSX, we can use exact line location to dedupe warnings
245 class AnonymousParentUsingJSX extends React.Component {
246 render() {
247 - return <StatelessComponent name="A" ref={() => {}} />;
247 + return <FunctionComponent name="A" ref={() => {}} />;
248 }
249 }
250 Object.defineProperty(AnonymousParentUsingJSX, 'name', {value: undefined});
@@ -255,9 +255,7 @@ describe('ReactStatelessComponent', () => {
255 instance1 = ReactTestUtils.renderIntoDocument(
256 <AnonymousParentUsingJSX />,
257 );
258 - }).toWarnDev(
259 - 'Warning: Stateless function components cannot be given refs.',
260 - );
258 + }).toWarnDev('Warning: Function components cannot be given refs.');
259 // Should be deduped (offending element is on the same line):
260 instance1.forceUpdate();
261 // Should also be deduped (offending element is on the same line):
@@ -266,7 +264,7 @@ describe('ReactStatelessComponent', () => {
264 // When owner doesn't use JSX, and is anonymous, we warn once per internal instance.
265 class AnonymousParentNotUsingJSX extends React.Component {
266 render() {
269 - return React.createElement(StatelessComponent, {
267 + return React.createElement(FunctionComponent, {
268 name: 'A',
269 ref: () => {},
270 });
@@ -281,20 +279,18 @@ describe('ReactStatelessComponent', () => {
279 instance2 = ReactTestUtils.renderIntoDocument(
280 <AnonymousParentNotUsingJSX />,
281 );
284 - }).toWarnDev(
285 - 'Warning: Stateless function components cannot be given refs.',
286 - );
282 + }).toWarnDev('Warning: Function components cannot be given refs.');
283 // Should be deduped (same internal instance, no additional warnings)
284 instance2.forceUpdate();
285 // Could not be deduped (different internal instance):
286 expect(() =>
287 ReactTestUtils.renderIntoDocument(<AnonymousParentNotUsingJSX />),
292 - ).toWarnDev('Warning: Stateless function components cannot be given refs.');
288 + ).toWarnDev('Warning: Function components cannot be given refs.');
289
290 // When owner doesn't use JSX, but is named, we warn once per owner name
291 class NamedParentNotUsingJSX extends React.Component {
292 render() {
297 - return React.createElement(StatelessComponent, {
293 + return React.createElement(FunctionComponent, {
294 name: 'A',
295 ref: () => {},
296 });
@@ -303,9 +299,7 @@ describe('ReactStatelessComponent', () => {
299 let instance3;
300 expect(() => {
301 instance3 = ReactTestUtils.renderIntoDocument(<NamedParentNotUsingJSX />);
306 - }).toWarnDev(
307 - 'Warning: Stateless function components cannot be given refs.',
308 - );
302 + }).toWarnDev('Warning: Function components cannot be given refs.');
303 // Should be deduped (same owner name, no additional warnings):
304 instance3.forceUpdate();
305 // Should also be deduped (same owner name, no additional warnings):
@@ -337,7 +331,7 @@ describe('ReactStatelessComponent', () => {
331 }
332
333 expect(() => ReactTestUtils.renderIntoDocument(<Parent />)).toWarnDev(
340 - 'Warning: Stateless function components cannot be given refs. ' +
334 + 'Warning: Function components cannot be given refs. ' +
335 'Attempts to access this ref will fail.\n\nCheck the render method ' +
336 'of `Parent`.\n' +
337 ' in Child (at **)\n' +
packages/react-dom/src/__tests__/ReactTestUtils-test.js
+2 -2
@@ -259,7 +259,7 @@ describe('ReactTestUtils', () => {
259 });
260
261 it('can scry with stateless components involved', () => {
262 - const Stateless = () => (
262 + const Function = () => (
263 <div>
264 <hr />
265 </div>
@@ -269,7 +269,7 @@ describe('ReactTestUtils', () => {
269 render() {
270 return (
271 <div>
272 - <Stateless />
272 + <Function />
273 <hr />
274 </div>
275 );
packages/react-dom/src/__tests__/multiple-copies-of-react-test.js
+1 -1
@@ -27,7 +27,7 @@ describe('when different React version is used with string ref', () => {
27 }).toThrow(
28 'Element ref was specified as a string (foo) but no owner was set. This could happen for one of' +
29 ' the following reasons:\n' +
30 - '1. You may be adding a ref to a functional component\n' +
30 + '1. You may be adding a ref to a function component\n' +
31 "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
32 '3. You have multiple copies of React loaded\n' +
33 'See https://fb.me/react-refs-must-have-owner for more information.',
packages/react-dom/src/__tests__/refs-test.js
+1 -1
@@ -444,7 +444,7 @@ describe('creating element with ref in constructor', () => {
444 }).toThrowError(
445 'Element ref was specified as a string (p) but no owner was set. This could happen for one of' +
446 ' the following reasons:\n' +
447 - '1. You may be adding a ref to a functional component\n' +
447 + '1. You may be adding a ref to a function component\n' +
448 "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
449 '3. You have multiple copies of React loaded\n' +
450 'See https://fb.me/react-refs-must-have-owner for more information.',
packages/react-dom/src/test-utils/ReactTestUtils.js
+4 -4
@@ -12,8 +12,8 @@ import * as ReactInstanceMap from 'shared/ReactInstanceMap';
12 import {
13 ClassComponent,
14 ClassComponentLazy,
15 - FunctionalComponent,
16 - FunctionalComponentLazy,
15 + FunctionComponent,
16 + FunctionComponentLazy,
17 HostComponent,
18 HostText,
19 } from 'shared/ReactWorkTags';
@@ -93,8 +93,8 @@ function findAllInRenderedFiberTreeInternal(fiber, test) {
93 node.tag === HostText ||
94 node.tag === ClassComponent ||
95 node.tag === ClassComponentLazy ||
96 - node.tag === FunctionalComponent ||
97 - node.tag === FunctionalComponentLazy
96 + node.tag === FunctionComponent ||
97 + node.tag === FunctionComponentLazy
98 ) {
99 const publicInst = node.stateNode;
100 if (test(publicInst)) {
packages/react-is/src/__tests__/ReactIs-test.js
+2 -2
@@ -38,7 +38,7 @@ describe('ReactIs', () => {
38 }
39 }
40
41 - const StatelessComponent = () => React.createElement('div');
41 + const FunctionComponent = () => React.createElement('div');
42
43 const ForwardRefComponent = React.forwardRef((props, ref) =>
44 React.createElement(Component, {forwardedRef: ref, ...props}),
@@ -48,7 +48,7 @@ describe('ReactIs', () => {
48
49 expect(ReactIs.isValidElementType('div')).toEqual(true);
50 expect(ReactIs.isValidElementType(Component)).toEqual(true);
51 - expect(ReactIs.isValidElementType(StatelessComponent)).toEqual(true);
51 + expect(ReactIs.isValidElementType(FunctionComponent)).toEqual(true);
52 expect(ReactIs.isValidElementType(ForwardRefComponent)).toEqual(true);
53 expect(ReactIs.isValidElementType(Context.Provider)).toEqual(true);
54 expect(ReactIs.isValidElementType(Context.Consumer)).toEqual(true);
packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js
+5 -5
@@ -40,16 +40,16 @@ describe('ReactNativeError', () => {
40
41 const ref = React.createRef();
42
43 - function FunctionalComponent(props) {
43 + function FunctionComponent(props) {
44 return props.children;
45 }
46
47 class ClassComponent extends React.Component {
48 render() {
49 return (
50 - <FunctionalComponent>
50 + <FunctionComponent>
51 <View foo="test" ref={ref} />
52 - </FunctionalComponent>
52 + </FunctionComponent>
53 );
54 }
55 }
@@ -66,14 +66,14 @@ describe('ReactNativeError', () => {
66 expect(componentStack).toBe(
67 '\n' +
68 ' in View (at **)\n' +
69 - ' in FunctionalComponent (at **)\n' +
69 + ' in FunctionComponent (at **)\n' +
70 ' in ClassComponent (at **)',
71 );
72 } else {
73 expect(componentStack).toBe(
74 '\n' +
75 ' in View\n' +
76 - ' in FunctionalComponent\n' +
76 + ' in FunctionComponent\n' +
77 ' in ClassComponent',
78 );
79 }
packages/react-reconciler/src/ReactChildFiber.js
+4 -4
@@ -21,7 +21,7 @@ import {
21 REACT_PORTAL_TYPE,
22 } from 'shared/ReactSymbols';
23 import {
24 - FunctionalComponent,
24 + FunctionComponent,
25 ClassComponent,
26 ClassComponentLazy,
27 HostText,
@@ -140,7 +140,7 @@ function coerceRef(
140 invariant(
141 ownerFiber.tag === ClassComponent ||
142 ownerFiber.tag === ClassComponentLazy,
143 - 'Stateless function components cannot have refs.',
143 + 'Function components cannot have refs.',
144 );
145 inst = ownerFiber.stateNode;
146 }
@@ -183,7 +183,7 @@ function coerceRef(
183 element._owner,
184 'Element ref was specified as a string (%s) but no owner was set. This could happen for one of' +
185 ' the following reasons:\n' +
186 - '1. You may be adding a ref to a functional component\n' +
186 + '1. You may be adding a ref to a function component\n' +
187 "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
188 '3. You have multiple copies of React loaded\n' +
189 'See https://fb.me/react-refs-must-have-owner for more information.',
@@ -1322,7 +1322,7 @@ function ChildReconciler(shouldTrackSideEffects) {
1322 // Intentionally fall through to the next case, which handles both
1323 // functions and classes
1324 // eslint-disable-next-lined no-fallthrough
1325 - case FunctionalComponent: {
1325 + case FunctionComponent: {
1326 const Component = returnFiber.type;
1327 invariant(
1328 false,
packages/react-reconciler/src/ReactCurrentFiber.js
+4 -4
@@ -10,8 +10,8 @@
10 import ReactSharedInternals from 'shared/ReactSharedInternals';
11 import {
12 IndeterminateComponent,
13 - FunctionalComponent,
14 - FunctionalComponentLazy,
13 + FunctionComponent,
14 + FunctionComponentLazy,
15 ClassComponent,
16 ClassComponentLazy,
17 HostComponent,
@@ -29,8 +29,8 @@ type LifeCyclePhase = 'render' | 'getChildContext';
29 function describeFiber(fiber: Fiber): string {
30 switch (fiber.tag) {
31 case IndeterminateComponent:
32 - case FunctionalComponent:
33 - case FunctionalComponentLazy:
32 + case FunctionComponent:
33 + case FunctionComponentLazy:
34 case ClassComponent:
35 case ClassComponentLazy:
36 case HostComponent:
packages/react-reconciler/src/ReactFiber.js
+2 -2
@@ -34,7 +34,7 @@ import {
34 ContextConsumer,
35 Profiler,
36 PlaceholderComponent,
37 - FunctionalComponentLazy,
37 + FunctionComponentLazy,
38 ClassComponentLazy,
39 ForwardRefLazy,
40 PureComponent,
@@ -302,7 +302,7 @@ export function resolveLazyComponentTag(
302 if (typeof Component === 'function') {
303 return shouldConstruct(Component)
304 ? ClassComponentLazy
305 - : FunctionalComponentLazy;
305 + : FunctionComponentLazy;
306 } else if (Component !== undefined && Component !== null) {
307 const $$typeof = Component.$$typeof;
308 if ($$typeof === REACT_FORWARD_REF_TYPE) {
packages/react-reconciler/src/ReactFiberBeginWork.js
+28 -30
@@ -15,8 +15,8 @@ import checkPropTypes from 'prop-types/checkPropTypes';
15
16 import {
17 IndeterminateComponent,
18 - FunctionalComponent,
19 - FunctionalComponentLazy,
18 + FunctionComponent,
19 + FunctionComponentLazy,
20 ClassComponent,
21 ClassComponentLazy,
22 HostRoot,
@@ -111,15 +111,15 @@ import {resolveLazyComponentTag} from './ReactFiber';
111 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
112
113 let didWarnAboutBadClass;
114 -let didWarnAboutContextTypeOnFunctionalComponent;
115 -let didWarnAboutGetDerivedStateOnFunctionalComponent;
116 -let didWarnAboutStatelessRefs;
114 +let didWarnAboutContextTypeOnFunctionComponent;
115 +let didWarnAboutGetDerivedStateOnFunctionComponent;
116 +let didWarnAboutFunctionRefs;
117
118 if (__DEV__) {
119 didWarnAboutBadClass = {};
120 - didWarnAboutContextTypeOnFunctionalComponent = {};
121 - didWarnAboutGetDerivedStateOnFunctionalComponent = {};
122 - didWarnAboutStatelessRefs = {};
120 + didWarnAboutContextTypeOnFunctionComponent = {};
121 + didWarnAboutGetDerivedStateOnFunctionComponent = {};
122 + didWarnAboutFunctionRefs = {};
123 }
124
125 export function reconcileChildren(
@@ -258,7 +258,7 @@ function updatePureComponent(
258 }
259 }
260
261 - // The rest is a fork of updateFunctionalComponent
261 + // The rest is a fork of updateFunctionComponent
262 let nextChildren;
263 prepareToReadContext(workInProgress, renderExpirationTime);
264 if (__DEV__) {
@@ -345,7 +345,7 @@ function markRef(current: Fiber | null, workInProgress: Fiber) {
345 }
346 }
347
348 -function updateFunctionalComponent(
348 +function updateFunctionComponent(
349 current,
350 workInProgress,
351 Component,
@@ -730,8 +730,8 @@ function mountIndeterminateComponent(
730 const resolvedProps = resolveDefaultProps(Component, props);
731 let child;
732 switch (resolvedTag) {
733 - case FunctionalComponentLazy: {
734 - child = updateFunctionalComponent(
733 + case FunctionComponentLazy: {
734 + child = updateFunctionComponent(
735 current,
736 workInProgress,
737 Component,
@@ -869,13 +869,13 @@ function mountIndeterminateComponent(
869 renderExpirationTime,
870 );
871 } else {
872 - // Proceed under the assumption that this is a functional component
873 - workInProgress.tag = FunctionalComponent;
872 + // Proceed under the assumption that this is a function component
873 + workInProgress.tag = FunctionComponent;
874 if (__DEV__) {
875 if (Component) {
876 warningWithoutStack(
877 !Component.childContextTypes,
878 - '%s(...): childContextTypes cannot be defined on a functional component.',
878 + '%s(...): childContextTypes cannot be defined on a function component.',
879 Component.displayName || Component.name || 'Component',
880 );
881 }
@@ -891,11 +891,11 @@ function mountIndeterminateComponent(
891 if (debugSource) {
892 warningKey = debugSource.fileName + ':' + debugSource.lineNumber;
893 }
894 - if (!didWarnAboutStatelessRefs[warningKey]) {
895 - didWarnAboutStatelessRefs[warningKey] = true;
894 + if (!didWarnAboutFunctionRefs[warningKey]) {
895 + didWarnAboutFunctionRefs[warningKey] = true;
896 warning(
897 false,
898 - 'Stateless function components cannot be given refs. ' +
898 + 'Function components cannot be given refs. ' +
899 'Attempts to access this ref will fail.%s',
900 info,
901 );
@@ -905,15 +905,13 @@ function mountIndeterminateComponent(
905 if (typeof Component.getDerivedStateFromProps === 'function') {
906 const componentName = getComponentName(Component) || 'Unknown';
907
908 - if (!didWarnAboutGetDerivedStateOnFunctionalComponent[componentName]) {
908 + if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {
909 warningWithoutStack(
910 false,
911 - '%s: Stateless functional components do not support getDerivedStateFromProps.',
911 + '%s: Function components do not support getDerivedStateFromProps.',
912 componentName,
913 );
914 - didWarnAboutGetDerivedStateOnFunctionalComponent[
915 - componentName
916 - ] = true;
914 + didWarnAboutGetDerivedStateOnFunctionComponent[componentName] = true;
915 }
916 }
917
@@ -923,13 +921,13 @@ function mountIndeterminateComponent(
921 ) {
922 const componentName = getComponentName(Component) || 'Unknown';
923
926 - if (!didWarnAboutContextTypeOnFunctionalComponent[componentName]) {
924 + if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {
925 warningWithoutStack(
926 false,
929 - '%s: Stateless functional components do not support contextType.',
927 + '%s: Function components do not support contextType.',
928 componentName,
929 );
932 - didWarnAboutContextTypeOnFunctionalComponent[componentName] = true;
930 + didWarnAboutContextTypeOnFunctionComponent[componentName] = true;
931 }
932 }
933 }
@@ -1297,10 +1295,10 @@ function beginWork(
1295 renderExpirationTime,
1296 );
1297 }
1300 - case FunctionalComponent: {
1298 + case FunctionComponent: {
1299 const Component = workInProgress.type;
1300 const unresolvedProps = workInProgress.pendingProps;
1303 - return updateFunctionalComponent(
1301 + return updateFunctionComponent(
1302 current,
1303 workInProgress,
1304 Component,
@@ -1308,11 +1306,11 @@ function beginWork(
1306 renderExpirationTime,
1307 );
1308 }
1311 - case FunctionalComponentLazy: {
1309 + case FunctionComponentLazy: {
1310 const thenable = workInProgress.type;
1311 const Component = getResultFromResolvedThenable(thenable);
1312 const unresolvedProps = workInProgress.pendingProps;
1315 - const child = updateFunctionalComponent(
1313 + const child = updateFunctionComponent(
1314 current,
1315 workInProgress,
1316 Component,
packages/react-reconciler/src/ReactFiberCompleteWork.js
+4 -4
@@ -20,8 +20,8 @@ import type {
20
21 import {
22 IndeterminateComponent,
23 - FunctionalComponent,
24 - FunctionalComponentLazy,
23 + FunctionComponent,
24 + FunctionComponentLazy,
25 ClassComponent,
26 ClassComponentLazy,
27 HostRoot,
@@ -353,8 +353,8 @@ function completeWork(
353 const newProps = workInProgress.pendingProps;
354
355 switch (workInProgress.tag) {
356 - case FunctionalComponent:
357 - case FunctionalComponentLazy:
356 + case FunctionComponent:
357 + case FunctionComponentLazy:
358 break;
359 case ClassComponent: {
360 const Component = workInProgress.type;
packages/react-reconciler/src/ReactFiberUnwindWork.js
+5 -5
@@ -18,7 +18,7 @@ import getComponentName from 'shared/getComponentName';
18 import warningWithoutStack from 'shared/warningWithoutStack';
19 import {
20 IndeterminateComponent,
21 - FunctionalComponent,
21 + FunctionComponent,
22 ClassComponent,
23 ClassComponentLazy,
24 HostRoot,
@@ -260,9 +260,9 @@ function throwException(
260 );
261 sourceFiber.effectTag &= ~Incomplete;
262 if (sourceFiber.tag === IndeterminateComponent) {
263 - // Let's just assume it's a functional component. This fiber will
263 + // Let's just assume it's a function component. This fiber will
264 // be unmounted in the immediate next commit, anyway.
265 - sourceFiber.tag = FunctionalComponent;
265 + sourceFiber.tag = FunctionComponent;
266 }
267
268 if (
@@ -275,11 +275,11 @@ function throwException(
275 sourceFiber.effectTag &= ~LifecycleEffectMask;
276 if (sourceFiber.alternate === null) {
277 // We're about to mount a class component that doesn't have an
278 - // instance. Turn this into a dummy functional component instead,
278 + // instance. Turn this into a dummy function component instead,
279 // to prevent type errors. This is a bit weird but it's an edge
280 // case and we're about to synchronously delete this
281 // component, anyway.
282 - sourceFiber.tag = FunctionalComponent;
282 + sourceFiber.tag = FunctionComponent;
283 sourceFiber.type = NoopComponent;
284 }
285 }
packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.internal.js
+9 -9
@@ -158,7 +158,7 @@ describe('ReactIncrementalSideEffects', () => {
158 }
159 }
160
161 - function FunctionalComponent(props) {
161 + function FunctionComponent(props) {
162 return <span prop="Function" />;
163 }
164
@@ -168,7 +168,7 @@ describe('ReactIncrementalSideEffects', () => {
168 {props.useClass ? (
169 <ClassComponent />
170 ) : props.useFunction ? (
171 - <FunctionalComponent />
171 + <FunctionComponent />
172 ) : props.useText ? (
173 'Text'
174 ) : null}
@@ -210,7 +210,7 @@ describe('ReactIncrementalSideEffects', () => {
210 }
211 }
212
213 - function FunctionalComponent(props) {
213 + function FunctionComponent(props) {
214 return <span prop="Function" />;
215 }
216
@@ -220,7 +220,7 @@ describe('ReactIncrementalSideEffects', () => {
220 {props.useClass ? (
221 <ClassComponent key="a" />
222 ) : props.useFunction ? (
223 - <FunctionalComponent key="a" />
223 + <FunctionComponent key="a" />
224 ) : null}
225 Trail
226 </div>
@@ -1126,7 +1126,7 @@ describe('ReactIncrementalSideEffects', () => {
1126 }
1127 }
1128
1129 - function FunctionalComponent(props) {
1129 + function FunctionComponent(props) {
1130 return <span />;
1131 }
1132
@@ -1134,7 +1134,7 @@ describe('ReactIncrementalSideEffects', () => {
1134 return props.show ? (
1135 <div>
1136 <ClassComponent ref={n => ops.push(n)} />
1137 - <FunctionalComponent ref={n => ops.push(n)} />
1137 + <FunctionComponent ref={n => ops.push(n)} />
1138 <div ref={n => ops.push(n)} />
1139 </div>
1140 ) : null;
@@ -1142,16 +1142,16 @@ describe('ReactIncrementalSideEffects', () => {
1142
1143 ReactNoop.render(<Foo show={true} />);
1144 expect(ReactNoop.flush).toWarnDev(
1145 - 'Warning: Stateless function components cannot be given refs. ' +
1145 + 'Warning: Function components cannot be given refs. ' +
1146 'Attempts to access this ref will fail.\n\nCheck the render method ' +
1147 'of `Foo`.\n' +
1148 - ' in FunctionalComponent (at **)\n' +
1148 + ' in FunctionComponent (at **)\n' +
1149 ' in div (at **)\n' +
1150 ' in Foo (at **)',
1151 );
1152 expect(ops).toEqual([
1153 classInstance,
1154 - // no call for functional components
1154 + // no call for function components
1155 div(),
1156 ]);
1157
packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js
+1 -1
@@ -43,7 +43,7 @@ describe('ReactNewContext', () => {
43 // a suite of tests for a given context consumer implementation.
44 sharedContextTests('Context.Consumer', Context => Context.Consumer);
45 sharedContextTests(
46 - 'Context.unstable_read inside functional component',
46 + 'Context.unstable_read inside function component',
47 Context =>
48 function Consumer(props) {
49 const observedBits = props.unstable_observedBits;
packages/react-reconciler/src/__tests__/ReactPure-test.internal.js
+2 -2
@@ -178,14 +178,14 @@ describe('pure', () => {
178 }
179 }
180 expect(() => pure(SomeClass)).toWarnDev(
181 - 'pure: The first argument must be a functional component.',
181 + 'pure: The first argument must be a function component.',
182 {withoutStack: true},
183 );
184 });
185
186 it('warns if first argument is not a function', () => {
187 expect(() => pure()).toWarnDev(
188 - 'pure: The first argument must be a functional component. Instead ' +
188 + 'pure: The first argument must be a function component. Instead ' +
189 'received: undefined',
190 {withoutStack: true},
191 );
packages/react-test-renderer/src/ReactTestRenderer.js
+6 -6
@@ -16,8 +16,8 @@ import {batchedUpdates} from 'events/ReactGenericBatching';
16 import {findCurrentFiberUsingSlowPath} from 'react-reconciler/reflection';
17 import {
18 Fragment,
19 - FunctionalComponent,
20 - FunctionalComponentLazy,
19 + FunctionComponent,
20 + FunctionComponentLazy,
21 ClassComponent,
22 ClassComponentLazy,
23 HostComponent,
@@ -164,7 +164,7 @@ function toTree(node: ?Fiber) {
164 rendered: childrenToTree(node.child),
165 };
166 }
167 - case FunctionalComponent:
167 + case FunctionComponent:
168 return {
169 nodeType: 'component',
170 type: node.type,
@@ -172,7 +172,7 @@ function toTree(node: ?Fiber) {
172 instance: null,
173 rendered: childrenToTree(node.child),
174 };
175 - case FunctionalComponentLazy: {
175 + case FunctionComponentLazy: {
176 const thenable = node.type;
177 const type = thenable._reactResult;
178 return {
@@ -214,8 +214,8 @@ function toTree(node: ?Fiber) {
214 }
215
216 const validWrapperTypes = new Set([
217 - FunctionalComponent,
218 - FunctionalComponentLazy,
217 + FunctionComponent,
218 + FunctionComponentLazy,
219 ClassComponent,
220 ClassComponentLazy,
221 HostComponent,
packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
+2 -2
@@ -359,7 +359,7 @@ describe('ReactShallowRenderer', () => {
359 expect(renderCounter).toEqual(2);
360 });
361
362 - it('should shallow render a functional component', () => {
362 + it('should shallow render a function component', () => {
363 function SomeComponent(props, context) {
364 return (
365 <div>
@@ -1408,7 +1408,7 @@ describe('ReactShallowRenderer', () => {
1408 expect(log).toEqual(['render']);
1409 });
1410
1411 - it('should not get this in a functional component', () => {
1411 + it('should not get this in a function component', () => {
1412 const logs = [];
1413 function Foo() {
1414 logs.push(this);
packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js
+1 -1
@@ -281,7 +281,7 @@ describe('ReactTestRenderer', () => {
281 }
282 ReactTestRenderer.create(<Baz />);
283 expect(() => ReactTestRenderer.create(<Foo />)).toWarnDev(
284 - 'Warning: Stateless function components cannot be given refs. Attempts ' +
284 + 'Warning: Function components cannot be given refs. Attempts ' +
285 'to access this ref will fail.\n\nCheck the render method of `Foo`.\n' +
286 ' in Bar (at **)\n' +
287 ' in Foo (at **)',
packages/react/src/ReactElementValidator.js
+1 -1
@@ -187,7 +187,7 @@ function validatePropTypes(element) {
187 const type = element.type;
188 let name, propTypes;
189 if (typeof type === 'function') {
190 - // Class or functional component
190 + // Class or function component
191 name = type.displayName || type.name;
192 propTypes = type.propTypes;
193 } else if (
packages/react/src/__tests__/ReactContextValidator-test.js
+3 -3
@@ -577,7 +577,7 @@ describe('ReactContextValidator', () => {
577 );
578 });
579
580 - it('should warn if you define contextType on a functional component', () => {
580 + it('should warn if you define contextType on a function component', () => {
581 const Context = React.createContext();
582
583 function ComponentA() {
@@ -591,7 +591,7 @@ describe('ReactContextValidator', () => {
591 ComponentB.contextType = Context;
592
593 expect(() => ReactTestUtils.renderIntoDocument(<ComponentA />)).toWarnDev(
594 - 'Warning: ComponentA: Stateless functional components do not support contextType.',
594 + 'Warning: ComponentA: Function components do not support contextType.',
595 {withoutStack: true},
596 );
597
@@ -599,7 +599,7 @@ describe('ReactContextValidator', () => {
599 ReactTestUtils.renderIntoDocument(<ComponentA />);
600
601 expect(() => ReactTestUtils.renderIntoDocument(<ComponentB />)).toWarnDev(
602 - 'Warning: ComponentB: Stateless functional components do not support contextType.',
602 + 'Warning: ComponentB: Function components do not support contextType.',
603 {withoutStack: true},
604 );
605 });
packages/react/src/__tests__/ReactProfiler-test.internal.js
+4 -4
@@ -130,13 +130,13 @@ describe('Profiler', () => {
130 });
131
132 it('should render children', () => {
133 - const FunctionalComponent = ({label}) => <span>{label}</span>;
133 + const FunctionComponent = ({label}) => <span>{label}</span>;
134 const renderer = ReactTestRenderer.create(
135 <div>
136 <span>outside span</span>
137 <React.unstable_Profiler id="label" onRender={jest.fn()}>
138 <span>inside span</span>
139 - <FunctionalComponent label="functional component" />
139 + <FunctionComponent label="function component" />
140 </React.unstable_Profiler>
141 </div>,
142 );
@@ -144,7 +144,7 @@ describe('Profiler', () => {
144 });
145
146 it('should support nested Profilers', () => {
147 - const FunctionalComponent = ({label}) => <div>{label}</div>;
147 + const FunctionComponent = ({label}) => <div>{label}</div>;
148 class ClassComponent extends React.Component {
149 render() {
150 return <block>{this.props.label}</block>;
@@ -152,7 +152,7 @@ describe('Profiler', () => {
152 }
153 const renderer = ReactTestRenderer.create(
154 <React.unstable_Profiler id="outer" onRender={jest.fn()}>
155 - <FunctionalComponent label="outer functional component" />
155 + <FunctionComponent label="outer function component" />
156 <React.unstable_Profiler id="inner" onRender={jest.fn()}>
157 <ClassComponent label="inner class component" />
158 <span>inner span</span>
packages/react/src/__tests__/__snapshots__/ReactProfiler-test.internal.js.snap
+8 -8
@@ -9,7 +9,7 @@ exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTr
9 inside span
10 </span>
11 <span>
12 - functional component
12 + function component
13 </span>
14 </div>
15 `;
@@ -21,7 +21,7 @@ exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTr
21 exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:disabled enableProfilerTimer:disabled should support nested Profilers 1`] = `
22 Array [
23 <div>
24 - outer functional component
24 + outer function component
25 </div>,
26 <block>
27 inner class component
@@ -41,7 +41,7 @@ exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTr
41 inside span
42 </span>
43 <span>
44 - functional component
44 + function component
45 </span>
46 </div>
47 `;
@@ -53,7 +53,7 @@ exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTr
53 exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:disabled enableProfilerTimer:enabled should support nested Profilers 1`] = `
54 Array [
55 <div>
56 - outer functional component
56 + outer function component
57 </div>,
58 <block>
59 inner class component
@@ -73,7 +73,7 @@ exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTr
73 inside span
74 </span>
75 <span>
76 - functional component
76 + function component
77 </span>
78 </div>
79 `;
@@ -85,7 +85,7 @@ exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTr
85 exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:enabled enableProfilerTimer:disabled should support nested Profilers 1`] = `
86 Array [
87 <div>
88 - outer functional component
88 + outer function component
89 </div>,
90 <block>
91 inner class component
@@ -105,7 +105,7 @@ exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTr
105 inside span
106 </span>
107 <span>
108 - functional component
108 + function component
109 </span>
110 </div>
111 `;
@@ -117,7 +117,7 @@ exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTr
117 exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:enabled enableProfilerTimer:enabled should support nested Profilers 1`] = `
118 Array [
119 <div>
120 - outer functional component
120 + outer function component
121 </div>,
122 <block>
123 inner class component
packages/react/src/__tests__/forwardRef-test.js
+4 -4
@@ -22,7 +22,7 @@ describe('forwardRef', () => {
22 });
23
24 it('should update refs when switching between children', () => {
25 - function FunctionalComponent({forwardedRef, setRefOnDiv}) {
25 + function FunctionComponent({forwardedRef, setRefOnDiv}) {
26 return (
27 <section>
28 <div ref={setRefOnDiv ? forwardedRef : null}>First</div>
@@ -32,7 +32,7 @@ describe('forwardRef', () => {
32 }
33
34 const RefForwardingComponent = React.forwardRef((props, ref) => (
35 - <FunctionalComponent {...props} forwardedRef={ref} />
35 + <FunctionComponent {...props} forwardedRef={ref} />
36 ));
37
38 const ref = React.createRef();
@@ -73,7 +73,7 @@ describe('forwardRef', () => {
73 });
74
75 it('should support propTypes and defaultProps', () => {
76 - function FunctionalComponent({forwardedRef, optional, required}) {
76 + function FunctionComponent({forwardedRef, optional, required}) {
77 return (
78 <div ref={forwardedRef}>
79 {optional}
@@ -86,7 +86,7 @@ describe('forwardRef', () => {
86 props,
87 ref,
88 ) {
89 - return <FunctionalComponent {...props} forwardedRef={ref} />;
89 + return <FunctionComponent {...props} forwardedRef={ref} />;
90 });
91 RefForwardingComponent.propTypes = {
92 optional: PropTypes.string,
packages/react/src/pure.js
+2 -2
@@ -17,7 +17,7 @@ export default function pure<Props>(
17 if (typeof render !== 'function') {
18 warningWithoutStack(
19 false,
20 - 'pure: The first argument must be a functional component. Instead ' +
20 + 'pure: The first argument must be a function component. Instead ' +
21 'received: %s',
22 render === null ? 'null' : typeof render,
23 );
@@ -26,7 +26,7 @@ export default function pure<Props>(
26 if (prototype && prototype.isReactComponent) {
27 warningWithoutStack(
28 false,
29 - 'pure: The first argument must be a functional component. Classes ' +
29 + 'pure: The first argument must be a function component. Classes ' +
30 'are not supported. Use React.PureComponent instead.',
31 );
32 }
packages/shared/ReactWorkTags.js
+3 -3
@@ -28,11 +28,11 @@ export type WorkTag =
28 | 17
29 | 18;
30
31 -export const FunctionalComponent = 0;
32 -export const FunctionalComponentLazy = 1;
31 +export const FunctionComponent = 0;
32 +export const FunctionComponentLazy = 1;
33 export const ClassComponent = 2;
34 export const ClassComponentLazy = 3;
35 -export const IndeterminateComponent = 4; // Before we know whether it is functional or class
35 +export const IndeterminateComponent = 4; // Before we know whether it is function or class
36 export const HostRoot = 5; // Root of a host tree. Could be nested inside another node.
37 export const HostPortal = 6; // A subtree. Could be an entry point to a different renderer.
38 export const HostComponent = 7;