What is the definition for "parent ponent" in React?

eg.

const A = () => {
  return (
    <B>
      <C/>
    </B>
  );
}

Is A the parent of C?
Is B the parent of C?

Follow up:
B gets the element of C via children prop. If C is the child of B, then B supposed to be the parent of C. But that should actually be a containment as mentioned in here.

What is the definition for "parent ponent" in React?

eg.

const A = () => {
  return (
    <B>
      <C/>
    </B>
  );
}

Is A the parent of C?
Is B the parent of C?

Follow up:
B gets the element of C via children prop. If C is the child of B, then B supposed to be the parent of C. But that should actually be a containment as mentioned in here.

• javascript
• reactjs
• react-ponent

• 2 A ponent is a function (or class with a render method) that returns react elements. I would consider any ponent that's rendered by another ponent to be a child, and the rendering ponent to be a parent. What is leading to you asking this question? – Andy Ray Commented Mar 9, 2022 at 22:49
• 2 Parent and containment are not mutually exclusive. Containment is more like a description of the relationship between the information a parent ponent has of its children. – Jacob K Commented Mar 9, 2022 at 22:59
• I haven't seen any clear explanation at documents. But I saw there are some places/blogs/tutorials mentioning "parent ponent". – ykaragol Commented Mar 10, 2022 at 4:29
• 2 I would think of it the same way as calling nested functions. Any function called by another function has a parent/child relationship, and technically a grandparent/etc relationship. Parent functions up the hierarchy have the opportunity to pass data/context down to child functions, either directly (props) or indirectly (context/providers) – Andy Ray Commented Mar 10, 2022 at 20:27
• 2 I'd probably take the tree structure from the React devtools as the definition. – Bergi Commented Mar 20, 2022 at 2:10

7 Answers 7

What is the definition of parent ponent

React is a tool to detect changes and perform manipulations in the DOM, which in turn is basically a tree. React ponents and JSX are syntatic sugar to call DOM's APIs.

eg

ReactDOM.render(
  React.createElement('div', null, 'Hello World'),
  document.getElementById('root')
);

Is just as valid as passing a Component as the first argument.

• A ponent represents an actual element of the DOM
• A DOM's element can be understood as a node in a tree

So a parent ponent/node can be defined as:

the node which is a predecessor of any node is called as PARENT NODE. In simple words, the node which has a branch from it to any other node is called a parent node. Parent node can also be defined as "The node which has child / children".

Is A parent of C

No. A is a parent node by definition but not C's parent. For all purposes A is grandparent of C cause it is it's predecessor but not it's PARENT (directly predecessor).

A is parent of B which is parent of C.

If you would access C in the DOM the following is a valid statement:

A.parentNode.parentNode

Is B a parent of C

Yes!

B gets the element of C via children prop. If C is the child of B, then B supposed to be the parent of C. But that should actually be a containment as mentioned in here.

That's exactly it. Everything passed inside a ponents instantiation is mapped to a special prop name children. A containment is just a fancy way of saying that a ponent can receive arbitrary children from it's parents and still be able to access it.

const Parent = () => <Child> Arbitrary value or node </Child>;

const Child = ({ children }) => <p> {children} </p>;

children represents everything that was passed inside the ponent's tag.

At least within the react docs, there is no exclusive definition of the terms parent/child ponent, but one can derive a definition from the usage of those terms in the docs, which might be opinionated.

So my definition would be: In the hierarchy tree, every ponent that is above the ponent in question, has an ancestor relation to that ponent, and thus is a parent ponent. Everything below can serve as a direct or indirect child.

Furthermore, direct parent ponents may pass information through props to its direct children and through context to its direct and indirect children. Children ponents may receive information from parent ponents accordingly.

Therefore:

Is A the parent of C?

yes (I would say a direct parent, but this can be disputed. Since A can pass props to C, but in the hierarchy tree, C would sit below B. A > B > C)

Is B the parent of C?

yes, direct parent. Tough it is a containment, still, B may provide direct props to C by a function call within B children(<propsForCFromB>)

"Containment" is just a concept in React where parents receive their children dynamically at runtime (as opposed to being pre-defined). In other words, containment is a special case of a parent-child relationship.

The first sentence of the section on containment you linked says, "Some ponents don’t know their children ahead of time" and then shows an example of a ponent named FancyBorder receiving arbitrary children via {props.children}. The existence of children implies that something is its parent, which in this case is FancyBorder.

I'm not sure if there are ironclad definitions of "parent" in React. "Parent" is a generic puter science term used to refer to something immediately above another in a hierarchy. For example, "C:\Program Files\Microsoft Office" is the parent directory of "C:\Program Files\Microsoft Office\Word".

A ponent that accepts 'children'

So in a Higher-order Component, that manages rendering ponents based on the auth state of a user, the children of the parent ponent would be the ponent that is returned by the HoC

const Protected = () => {
  const isAuthorised = useAuth();
  return isAuthorised ? <Outlet /> : <Login />;
};

This is code from how react-router-dom manages rendering ponents based on auth state. <Outlet /> just means that it's the initial ponent that you're trying to render

So you can see that the <Outlet /> and <Login /> ponents would be children of the Protected ponent

In your question, I'd consider A to be a Higher-order Component and then B the actual parent of C

The term parent in React monly refers to the ponent that is one level higher in the generated element tree (as explained in other answers to this question).

However, a distinction can also be made between the parent-child relationship and the owner-ownee concept in React's ontology:

In React each child has both a “parent” and an “owner”. The owner is the ponent that created a ReactElement. I.e. the render method which contains the JSX or createElement callsite. (Streamlining React Elements)

In React, an owner is the ponent that sets the props of other ponents. More formally, if a ponent X is created in ponent Y's render() method, it is said that X is owned by Y. (Multiple Components & Ownership)

Furthermore:

<Parent><Child /></Parent>

[A] Parent can read its children by accessing the special this.props.children prop. https://web.archive/web/20160310035830/https://facebook.github.io/react/docs/multiple-ponents.html

Based on React's ontology above, one could say:

• A is the owner of <B /> and <C />.
• A is also the parent of <B /> (given the resulting render tree)
• <B /> can be considered the parent of <C />, in terms of containment. In this scenario, A created and passed <C /> as an argument to <B /> via props.children. It is then the responsibility of <B /> to embed and render <C />, and it even has the discretion to decide not to render it at all.
• From a"render tree perspective", however, the actual direct parent-child relationship between <B /> and <C /> may vary depending on how B chooses to embed <C />. Typically, there will be other ponents inserted in between, making <B /> a grandparent of <C />.

So the answer to your question really depends on your perspective and on your application's runtime behaviour.

For more in-depth information on the owner-ownee concept, you can refer to this stackoverflow thread. However, it's worth noting that the practical significance of the owner-ownee concept in day-to-day React programming is limited, and it is pletely absent in the XML/HTML world. As a result, many programmers tend to overlook or disregard this terminology in their usual development practices.

There is no official definition from the React documentation. The term is often used in an informal manner, and sometimes to refer to any ancestor not the direct parent.

If you want to use the term in a technically accurate manner, you should distinguish between (JSX) elements and (mounted) ponents.

• JSX, just like XML, defines a tree structure by nesting tags. These tags can represent a fragment element, a builtin element (lowercase) or refer to a class/function ponent to render (uppercase)

  The parent of an element is the element of which it is a direct syntactic child.

  In your example <B><C /><B>, <B> is the parent element of <C>. <B> is the root node in this tree (that is rendered by A), it does not have a parent element. We have not seen where <A> is used or what parent element it might have. <C /> does not have any child elements.

• React keeps the state of ponents in a tree structure, whether that are native DOM elements, the instances of class ponents, the hook states of function ponents, or other things (context providers and consumers, portals, etc). You can inspect this structure, often dubbed "virtual DOM", in the React devtools.

  The parent of a ponent is the ponent in which it is rendered.

  In your example A = () => (<B>< C/></B>), A is the parent ponent of B. We have not seen what B does with the <C /> JSX element, so we don't know the parent ponent of C - it depends on the implementation. If B = ({children}) => (<>{children}</>), the parent ponent of C would indeed be B itself, but in B = ({children}) => (<div>{children}</div>) it would be the div "ponent". And B might not render the children prop at all, or it might render it multiple times, or it might modify what gets rendered.

simply: A is the parent of B and C in ponents aspect. B is the parent of C in DOM aspect.