Confusion with "your render function incorrectly returned a React Element (JSX)"

[squadette]

A bug is a crash or incorrect behavior. If you have a debugging or troubleshooting question, please open a discussion.

Environment

1. Ruby version: 3.26
2. Rails version: 6.1.7.0
3. Shakapacker/Webpacker version: NONE
4. React on Rails version: 13.3.5

Expected behavior

No warnings.

Actual behavior

I'm getting the following JS console warning:

"Your registered render-function (ReactOnRails.register) for RiverApp
incorrectly returned a React Element (JSX). Instead, return a React Function Component by
wrapping your JSX in a function. ReactOnRails v13 will throw error on this, as React Hooks do not work if you return JSX. Update by wrapping the result JSX of RiverApp in a fat arrow function.

First, this is already version 13, will it actually be throwing errors in 14.x? (I don't see clear signs in changelog.)

Second, I did like the warning says, but the warning does not go away:

const RiverApp = (props, railsContext) => (
    () => <Provider store={ReactOnRails.getStore('mokumStore')}>
        <River {...props} railsContext={railsContext} />
    </Provider>
);

ReactOnRails.register({ RiverApp });

If I remove () => in the second line, I get the same warning. The application works perfectly no matter what. Could the problem be with the diagnostics?

Small, reproducible repo

Not provided.

[justin808]

Here is an example of the correct syntax.

https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/HelloWorldHooksContext.jsx

I hope that helps.