What is the second parameter for in a React functional component?

Question

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?

Tittle

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? – Dost

I used a debugger to examine the call stack and it looks like this 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. – Tittle

@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. – Tittle

It was used for backwards compatibility to the legacy Context feature only. So you should not use it anymore. – Kyungkyushu

I think that this 2nd parameter should be used to pass children instead of props.children. – Tortfeasor

Answer 1

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.

Singapore

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. – Kyungkyushu