Skip to main content

react/noUnsafe

prevent usage of unsafe lifecycle methods

ESLint Equivalent: no-unsafe

Examples

Invalid

class Hello extends React.Component {
	UNSAFE_componentWillMount() {}
}

 file.tsx:2:1 lint/react/noUnsafe ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The UNSAFE_componentWillMount method is unsafe for use in async
    rendering. Use the componentDidMount method instead.

    1class Hello extends React.Component {
  > 2  UNSAFE_componentWillMount() {}
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3}

  See 
    https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
    for more information.


class Hello extends React.Component {
	UNSAFE_componentWillReceiveProps() {}
}

 file.tsx:2:1 lint/react/noUnsafe ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The UNSAFE_componentWillReceiveProps method is unsafe for use in
    async rendering. Use the getDerivedStateFromProps method instead.

    1class Hello extends React.Component {
  > 2  UNSAFE_componentWillReceiveProps() {}
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3}

  See 
    https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
    for more information.


class Hello extends React.Component {
	UNSAFE_componentWillUpdate() {}
}

 file.tsx:2:1 lint/react/noUnsafe ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The UNSAFE_componentWillUpdate method is unsafe for use in async
    rendering. Use the componentDidUpdate method instead.

    1class Hello extends React.Component {
  > 2  UNSAFE_componentWillUpdate() {}
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3}

  See 
    https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
    for more information.

Valid

class Hello extends React.Component {
	componentDidMount() {}
}