18

I noticed in a React.js functional component like:

import React from 'react';
import ReactDOM from 'react-dom';

function MyComponent(props, whatIsThisFor) {
  console.log(JSON.stringify(whatIsThisFor)); // logs {} to console
  return <div></div>
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

The whatIsThisFor parameter gets set to an empty object when it is rendered. I could not find the purpose of this parameter in any documentation. Does anyone know what it is for?

ken_o
  • 374
  • 2
  • 8
  • How is MyComponent exactly being called in that situation? Is it used in some higher order component or composed set of functions that could be passing props through and adding additional arguments? Where/how did you see this used? In that example, what did whatIsThisFor log? – Alexander Staroselsky Jul 04 '19 at 00:14
  • I used a debugger to examine the call stack and it looks like [this](https://github.com/facebook/react/blob/e6bfa327daf1034d207cdf02df373f87f59caa07/packages/react-reconciler/src/ReactFiberHooks.js#L419) is the line in the react source code that calls the function. So I guess it is some type of reference or context to something. – ken_o Jul 04 '19 at 00:18
  • @AlexanderStaroselsky, I edited the question to show how it is being called and what it logged. This is only an example because I want to know more about it. I'm not using it in any app. – ken_o Jul 04 '19 at 00:29
  • It was used for backwards compatibility to the legacy Context feature only. So you should not use it anymore. – RnMss Jan 22 '21 at 11:38
  • I think that this 2nd parameter should be used to pass children instead of `props.children`. – Miquel Al. Vicens Nov 04 '22 at 12:01

1 Answers1

15

As you investigated, the second param is reference forwarded using React.forwardRef(…) API. In docs - Forwarding refs to DOM components - you can find more info about the topic.

Edit:

This comment with this link, tells that I was only partially correct - regarding refs.

The second parameter in linked code is called refOrContext. It means, the parameter may be also a context and it seems to be a part of the Legacy Context API.

Caution: do not use Legacy Context API; use new Context API instead.

In short, when you define contextTypes field in a functional component, you'll receive an object with the defined shape as a second parameter. If the component is nested under another class component that implements getChildContext and returns object with some fields, these fields are available in context only when you mark them in contextTypes. Here's an example of the component:

import PropTypes from 'prop-types';

const ContextConsumer = (props, context) => {
  console.log(context); // { name: … }
  return …;
};

ContextConsumer.contextTypes = {
  name: PropTypes.string,
  …
};

export default ContextConsumer;

The complete example can be found on my StackBlitz. For more information, please read about Legacy context API.

pawel-schmidt
  • 1,125
  • 11
  • 15
  • 1
    The referenced page doesn't seem to show anything about the second parameter (named `context` in @types/react npm package) for a functional component. It only shows the second parameter (named `ref`) for the callback passed to React.forwardRef. – RnMss Dec 31 '20 at 11:54