title	Understanding Nested Components
version	0.1.0
revision	1

Understanding Nested Components

So, let's define the scenario based on above image.

We have component 1 to 5, each instanciating a previous component. (except 1)

As the final tree structire is:

- 1 master
  - text

- 2 master
  - 1 instance instnace of 1
    - text

- 3 master
  - 2 instance instance of 2
    - 1 instance instance of 1
      - text

- 4 master
  - 3 instance instance of 3
    - 2 instance instance of 2
      - 1 instance instance of 1
        - text

- 5 master
  - 4 instance of 4
    - 3 instance instance of 3
      - 2 instance instance of 2
        - 1 instance instance of 1
          - text

If you had only 1, we'de define the component as:

function _1() {
  return <p>1</p>;
}

if with instanciation, with override text:

function _1({ text = "1" }: { text: string }) {
  return <p>{text}</p>;
}

If we had only 1 & 2 master components and 1' & 2' instanciation We'de define 1 & 2 as below

function _1({ text = "1" }: { text: string }) {
  return <p>{text}</p>;
}

function _2() {
  return <_1 text="2" />;
}

The problem starts from 3rd. you might be thinking there's no big deal about this, but for computer iterating through the tree, it gets a bit tricky.

Since the 3 is instanciating 2, but actually having the value overriden for 1 (which is instanciation of 2).

function _1({ text = "1" }: { text: string }) {
  return <p>1</p>;
}

function _2() {
  return <_1 text="2" />;
}

But what if case like this?

If master 1 ~ 4 and 5 as a instance of 4

function _1() {
  return <p>1</p>;
}

function _2() {
  return <_1 />;
}

function _3() {
  return <_2 />;
}

function _4() {
  return <_3 />;
}

const _5 = <_4 />;

If all 1 ~ 5 as a master

function _1({ text = "1" }: { text: string }) {
  return <p>{text}</p>;
}

function _2({ text = "2" }: { text: string }) {
  return <_1 text={text} />;
}

function _3({ text = "3" }: { text: string }) {
  return <_2 text={text} />;
}

function _4({ text = "4" }: { text: string }) {
  return <_3 text={text} />;
}

function _5({ text = "1" }: { text: string }) {
  return <_4 text="5" />;
}

And this will impact all the masters starting from 4 to the starting 1.