Wrong message for anonymous functions

[ruiconti]

Consider the following scenario:

const Component = observer(function (props: IProps)) { /* Note that this is, in fact, an anonymous function */
    const { useHook } = props;
    const { myState } = useHook(); /* A hook cannot be used inside of another function */
    return <div>{myState}</div>
})

const WrappedComponent = function() {
    const [state, setState] = React.useState();
    React.useEffect((
        expensiveState.lazyImport().then(s => setState(s));
    ), []);
    
    const Wrapper = React.useCallback(() => state ? <Component {...state}>/> : <Loading/>, [state])
    return <Wrapper/>
}

ReactDOM.render(<WrappedComponent />, ...)

It is in fact a wrong function React component declaration, as React component functions must be named. However, I'm arguing that we should provide a meaningful and relevant error message, analogous to the eslint plugin's.

[Gelio]

Hey! Thanks for the report. That's an excellent idea to improve the error message.

At the moment I am a bit busy with my thesis. I don't think I will have time to get it done within the next month. If you'd like, you could submit a pull request improving the error message with that case. If not, I should be able to take care of it by the end of February

Thanks again for the suggestion!

[ruiconti]

Thanks for the kind and thoughtful reply, @Gelio. I took a stab at it on #30.