Eslint-plugin-react: react/no-render-return-value false positive

Created on 23 Mar 2017 · 5Comments · Source: yannickcr/eslint-plugin-react

Given the following configuration:

"react/no-render-return-value": "error",

and following code:

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from 'components/App';

const rootElement = document.getElementById('app');

const render = (Component) => ReactDOM.render(
  <AppContainer>
    <Component />
  </AppContainer>,
  rootElement
);
render(App);

if (module.hot) {
  module.hot.accept('components/App', () => render(App));
}

I am getting this:

8:31  error  Do not depend on the return value from ReactDOM.render  react/no-render-return-value

I see that the value from ReactDOM.render is used as a return value of the render function, but the return value of render is not used, so I don't think I should receive that error.

This code does not trigger the error:

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    rootElement
  );
};

question

Source

kamilmielnik

All 5 comments

The latter code is exactly what you need - the linter has no way of knowing that you're not using the return value of that function, unless you dont return it in the actual code.

In other words, use the block body form of the arrow whenever you don't want the return value to be part of the API of your function.

ljharb on 23 Mar 2017

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'

import App from '../components/App'


const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.querySelector('[data-root]')
  )
}

render(App)

if (module.hot) {
  module.hot.accept('../components/App', () => { render(App) })
}