Wrong message for anonymous functions
ruiconti opened this issue · comments
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.
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!