React Component with SubComponent - hot reload does not work

Question

I have an issue with my project with a simple SubComponent. If I do any changes inside that SubComonent it is not hot reloaded. I am not sure how to fix it.

I have components defined like this:

// Component.tsx
export const Component = () => {
  return <div>Component</div>;
};

Component.SubComponent = function SubComponent() {
  return <div>Hello From Sub</div>;
};

export const SubComponent1 = function SubComponent1() {
  return <div>Hello From Sub1</div>;
};

And usage:

// App.tsx
<Component.SubComponent />
<SubComponent1 />

If I do changes in Component.SubComponent it is not reloaded, but if I do changes in SubComponent1 it works well.

I have tested this with the clean create-react-app install and it does not work there too.

Any ideas on how to fix this or what is wrong with the code? I found quite a lot of articles about sub components on the internet.

Answer 1

The approach seems bad to me.

export const Component = () => {
  return <div>Component</div>;
};

Component.SubComponent = function SubComponent() {
  return <div>Hello From Sub</div>;
};

Export components one by one.

export const Form = () => (<></>)
export const Item = () => (<></>)

import * as Form from '...'

<Form.Form>
  <Form.Item>
  </Form.Item>
</Form.Form>

I see that <Form.Form /> is ugly. Another way would be:

export const Form = () => (<></>)
export const Item = () => (<></>)

import { Form, Item as FormItem } from '...'

<Form>
  <Form.Item>
  </Form.Item>
</Form>