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