LoginSignup
0

More than 3 years have passed since last update.

正常に動作しなくなった ESLint の react-native/no-used-styles に対応する

Last updated at Posted at 2020-11-05

ESLint で未使用な style を検出する react-native/no-used-styles があります。便利で使っていたのですが、再計算を抑えるためメモ化を加えたところ、そのルールが正しく動作しなくなりました。なお、コード例は簡略表示しています。

lintエラーが起こる
import memoize from 'lodash/memoize'

const Component: React.FC<Props> = () => {
  const styles = getStyles(hogehoge)
  return (
    <View style={styles.container} />
  )
}

const getStyles = memoize((hogehoge) => {
  return StyleSheet.create({
    // no-unused-style が表示される
    container: styleType<ViewStyle>({
      flex: 1,
    }),
  })
})

lintのエラーメッセージを見ると、以下のようになっていました。

Unused style detected: undefined.container(react-native/no-unused-styles)

ん?なんでundefined??

そこでESLintのコードを見て、検出ロジックを確認しました。どうやら、上記の return StyleSheet.create({ ... }) が問題のように見えてきました。そこで、直接 return せずに書き直しました。

lintエラーが無くなった
import memoize from 'lodash/memoize'

const Component: React.FC<Props> = () => {
  const styles = getStyles(hogehoge)
  return (
    <View style={styles.container} />
  )
}

const getStyles = memoize((hogehoge) => {
  const styles = StyleSheet.create({
    container: styleType<ViewStyle>({
      flex: 1,
    }),
  })
  return styles
})

react-native/no-used-styles が正しく動きました ✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌

まとめ

stylesをメモ化かつreturnで直接返してたというパターンで起こった問題なので、同じ問題に当たる方はとても少ないと思います。もし同じレアケースを引いた方がいれば、参考になれば幸いです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0