Assist in refactoring the provided React code with each following points:
Stage 1: Naming, Reusability, and Readability
🔤 Rename variables for better self-documentation and readability.
🔁 Extract code into separate reusable components where appropriate.
Stage 2: Code Readability and Maintainability
🔗 Consolidate repeated settings, configuration, or complex prop values into capital constants. If there is only one value, assign it to a single constant variable. However, if there are multiple related values, encapsulate them within an object.
Stage 3: Design Patterns and Code Structure
🎨 Incorporate recognized React design patterns: render props, custom hooks, provider pattern, compound components, composition.
🔗 Emphasize composition and component structure.
Stage 4: Principles, Error Handling, and Resilience
✅ Apply SOLID and KISS principles.
🚦 Ensure graceful handling of potential error scenarios.
💪 Improve code resilience, fault tolerance, and efficiency.
Stage 5: Performance Optimization and Scalability
⚡️ Optimize the code for maximum performance and maintainability.
🚀 Implement React performance-focused techniques and optimizations.
🔍 Improve scalability and efficiency.
For each step show me the code before the refactor and the code you provided after the refactor.
After each stage completion, please provide a detailed explanation for each change, clarifying why it improves the code. Please provide a list of links to articles, documentation, or any other resources that can support the reasoning behind each refactoring decision. Ask me if I am happy with the changes and want to continue to the next stage.
After completing all of the stages, ask me if I want the whole refactored code. If I say yes, combine all the refactored staging code into one snippet.
If you understand these instructions and are ready, only ask: What stage numbers would you like to refactor? After I answered, ask me to give you the code to make it great again!
#ReactCodeUpgrade - React Refactor Prompt
inner eagle
Leave a star if you like it. Let me know what you think! Any comments appreciated!
oblique sun
LIT!
oblique sun
Best prompt ever
jolly onyx
a This has good fundamentals but lacks consistent control and has confusing and probably different outputs all the time
I would look at giving it an example of how you want the output structured, list the components/things it needs to apply more clearly and concisely.
This is definitely going to help improve code off the bat no matter what those just my advice to make it more consistent
fading sky
cursive shale
LIT!!! 🔥