Skip to main content

react/useRenderReturn

This rule makes sure the render function is returning content.

ESLint Equivalent: require-render-return

Examples

Invalid

import React from 'react';
class Foo extends React.Component {
	render() {}
}

 file.tsx:3:10 lint/react/useRenderReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The render method on a component must return content.

    1import React from 'react';
    2class Foo extends React.Component {
  > 3  render() {}
                ^^
    4}


import React from 'react';
class Foo extends React.Component {
	render() {
		[1, 2, 3].map((num) => {
			return <div> Foo </div>
		});
	}
}

 file.tsx:3:10 lint/react/useRenderReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The render method on a component must return content.

    1import React from 'react';
    2class Foo extends React.Component {
  > 3  render() {
                ^
  > 4    [1, 2, 3].map((num) => {
  > 5      return <div> Foo </div>
  > 6    });
  > 7  }
     ^^^
    8}


import React from 'react';
class Foo extends React.Component {
	render = () => { }
}

 file.tsx:3:16 lint/react/useRenderReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The render method on a component must return content.

    1import React from 'react';
    2class Foo extends React.Component {
  > 3  render = () => { }
                      ^^^
    4}


import React, {Component} from 'react';
class Foo extends Component {
	render = () => { }
}

 file.tsx:3:16 lint/react/useRenderReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The render method on a component must return content.

    1import React, {Component} from 'react';
    2class Foo extends Component {
  > 3  render = () => { }
                      ^^^
    4}


import React from 'react';
const Foo = class extends React.Component {
	render = () => { }
}

 file.tsx:3:16 lint/react/useRenderReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The render method on a component must return content.

    1import React from 'react';
    2const Foo = class extends React.Component {
  > 3  render = () => { }
                      ^^^
    4}


import React, {Component} from 'react';
const Foo = class extends Component {
	render = () => { }
}

 file.tsx:3:16 lint/react/useRenderReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The render method on a component must return content.

    1import React, {Component} from 'react';
    2const Foo = class extends Component {
  > 3  render = () => { }
                      ^^^
    4}


import React from 'react';
const Foo = class extends React.PureComponent {
	render = () => { }
}

 file.tsx:3:16 lint/react/useRenderReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The render method on a component must return content.

    1import React from 'react';
    2const Foo = class extends React.PureComponent {
  > 3  render = () => { }
                      ^^^
    4}


import React, {PureComponent} from 'react';
const Foo = class extends PureComponent {
	render = () => { }
}

 file.tsx:3:16 lint/react/useRenderReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The render method on a component must return content.

    1import React, {PureComponent} from 'react';
    2const Foo = class extends PureComponent {
  > 3  render = () => { }
                      ^^^
    4}

Valid

import React from 'react';
class Foo extends React.Component {
	render() {
		return <div>Foo</div>;
	}
}
import React from 'react';
class Foo extends React.Component {
	render() {
		if (foo) {
			return <div>Foo</div>;
		} else {
			return void 0;
		}
	}
}
class Foo {
	render = () => { return <></> }
}
class Foo {
	render = () => (<></>)
}
class Foo extends Bar {
	render() { }
}