React-Refresh not working for bound function which returns JSX.

Describe the bug

I have a view that is binding to a function which returns JSX:

<div>
 {TestComponent()}
</div>

When the JSX that TestComponent returns changes, the view is not updated.

However; if the function is used in the below format, the changes to TestComponent are reflected to the view:

<div>
 <TestComponent></TestComponent>
</div>

Steps to reproduce

(Write your steps here:)

1. Clone the repo athttps://github.com/cincyelite22/React-Refresh-Test
2. Navigate into the examples/create-react-app folder
3. Run ‘yarn install’
4. Run ‘yarn start’
5. Change the value of “ReplaceMeToTest” in Dummy.js and observe that the view did not updated for the {Dummy( { val:'2. HMR Not Working ’ } )} usage.
6. Uncomment one of the extra exports in Dummy.js
7. Change the value of “ReplaceMeToTest” in Dummy.js again and observe that both usages are updated in the view.

Expected behavior

The view should update for both types of usages of “Dummy” regardless of whether the extra unused export is present.

Actual behavior

The view doesn’t update for both usages, but weirdly starts working if an extra unused export is added.

Reproducible demo

I have cloned https://github.com/pmmmwh/react-refresh-webpack-plugin and reproduced the issue in the create react app example. You can test these changes by pulling from the repo below: https://github.com/cincyelite22/React-Refresh-Test

[gaearon]

All of this sounds correct.

You shouldn’t be “calling” components directly because this breaks Hooks, too. So you should be using JSX or createElement for them. If you don’t intend that function to be treated as a component, don’t use Pascal Case for it.

When I lazy load my Components using above HOC full page reload takes places.

This sounds entirely unrelated to the issue on this thread and is a result of you using a class.

[pmmmwh]

When I lazy load my Components using above HOC full page reload takes places.

I just did some quick tests and I cannot reproduce this issue.

(Simply add your LazyLoader into examples/webpack-dev-server and wrap the LazyComponent with it)

@Rohitbels Please open a new issue with your particular usage in it to discuss this further.