Eslint-plugin-react: react/require-render-return shouldn't warn if render method is imported

[yamalight]

I generally write components like this - one file for component, one for render method, e.g.:

Component.js

import render from './render';

const MyComponent = React.createClass({
    // some other logic here
    // ...
    render,
});
export default MyComponent;

render.js

export default () => <div>hello world!</div>;

Currently this produces a warning, while it actually shouldn't.

[ljharb]

Linters generally don't look at the contents of other files. Since render is just a stateless function, why not render() { return <Render />; }?

[yamalight]

@ljharb I guess render example wasn't really good here.
I typically have something like this as render function (mostly to just separate logic and layout):

export default function render() {
    const {something} = this.state;
    return (
        <div>
            <button onClick={this.functionInComponent}>{something}</button>
        </div>
    );
};

I am not saying linter should read other files, but it shouldn't produce the error here. My guess is ignoring such cases would be more than enough.

[ljharb]

@yamalight right but still, that function is an SFC. why not just use it inline in jsx as a component?

[ljharb]

(Also, the whole point of a react component is that logic and layout for the same component _aren't_ separated)

[yamalight]

I have this obsession of splitting code into really small files :)
Just let me know if you think this is not a valid issue - close it, and I'll just tweak linter per-line where needed.

[yannickcr]

The pattern debate aside, I think it should be ignored by the rule since we cannot check if a return statement is present in the render method in this case.