When should I use a helper function vs. a full component?

Use helper functions for static JSX with no internal logic or hooks. Use a full Container/View component if the section needs its own state, is reused across files, or has complex business logic.

Can it help with deeply nested ternary operators?

Absolutely. It provides a 'View State Map' pattern where logic is pre-computed in a Container and the View simply maps that state to the appropriate UI component.

Does this skill ensure my refactoring doesn't break anything?

Yes, it incorporates a 'Tests First' (TDD) step, prompting you to verify or write unit tests before and after the refactoring process.

How does this skill handle SonarJS complexity errors?

The skill identifies functions exceeding the cognitive complexity threshold (typically 28) and applies specific patterns like state pre-computation and component extraction to lower the score.

Does this skill work with React Native and Expo?

Yes, it is part of the lisa-expo plugin and is specifically designed to handle the complexities of React and React Native View components.

React Component Complexity Reducer

Name: React Component Complexity Reducer
Author: CodySwannGT

byCodySwannGT

•

Mobile Development

Optimizes React and React Native codebases by refactoring complex components into manageable, high-quality Container/View patterns.

This skill provides a systematic framework for reducing cognitive complexity in React components, specifically targeting SonarJS linting violations. It guides developers through the process of breaking down large View components, deciding between helper functions and full component extractions, and enforcing the project's Container/View architectural pattern. By providing strategies to simplify nested conditionals and pre-compute UI states, it ensures codebases remain maintainable, readable, and testable while adhering to strict governance guardrails.

主要功能

01Decision framework for selecting extraction strategies (Helper vs. Component)

02Automated detection and resolution of SonarJS cognitive complexity violations

03Enforcement of standardized Container/View architectural patterns

04Pre-computation logic for simplifying nested ternaries and conditional styling

05Integrated TDD workflow for safe, verified refactoring

061 GitHub stars

使用场景

01Standardizing architecture during the extraction of reusable UI components

02Refactoring legacy View components that exceed 200 lines of code

03Resolving ESLint cognitive-complexity errors in large React files

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add codyswanngt/lisa reduce-complexity

For use in Claude.ai and ChatGPT