Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

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で直接返してたというパターンで起こった問題なので、同じ問題に当たる方はとても少ないと思います。もし同じレアケースを引いた方がいれば、参考になれば幸いです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away