How to Refactor React JS Code Faster

Показать описание

Process of restructuring the existing code without changing its external behavior is refactoring.
To void technical debt we have to refactor code often. I will share some of the best practices to write efficient and readable components in React JS.

Refactoring in React JS mainly involves:

- Code formatting improvements
- Removing unnecessary tags and code
- Using understandable meaningful names for variables, classes, functions, files and folders
- Avoiding repetitions
- Using functional over class components
- Avoiding arrow function in render or in JSX
- Making the bundle smaller and using code splitting
- Keeping components small
- Using pure components
- Using single responsibility functions
- Using comments
- Keeping same structure in code
- Using linter and/or prettier rules

and such

I will share a technique and useful resource that will help you in some areas of code refactoring easily in React JS.

Select the code and a light bulb appears in visual studio code. Clicking it gives me few options or actions. I can conditionally render the selected code or extract code into another component with automatic import statement and component tag creation. I can move this code into another component easily just by selecting the code. We have moved the selected code into another component. Import statement has been created for the new component. And component tag has been placed in JSX as well.

I can select a component and convert class component into function component. I can convert function component into a class component easily. I can change state variables names easily. I can select event handler function and wrap it with useCallback easily.

Selection of code determines code refactoring actions. Different selection will give you different options. And I can do a lot more by just selecting code and choosing appropriate actions.

And here is how i am doing it. Go to vs code extensions and search for 'Glean'. This extension provides refactoring tools for React codebase.

With this extension, you can:

- Extract JSX into new component in React JS
- Convert Class Components to Functional Components in React JS
- Convert Functional Components to Class Components in React JS
- Wrap JSX with conditional in React JS
- Rename state variables and their setters simultaneously in React JS
- Wrap code with useMemo, useCallback or useEffect in React JS
- Move code between files in React JS
- Break components into parent child components in React JS
- Create new component from selected code in React JS
- Convert setState calls to useState in React JS
- Convert componentDidMount and componentWillUnmount to useEffect in React JS
- Convert class properties to useRef in React JS
- Wrap call non-Lifecycle methods with useCallback in React JS

It has got Typescript support, ES2015 modules support, CommonJS modules support and more. This extension works with js, jsx, ts and tsx files. I would recommend you quickly write logic and everything in same component. Then break it into other components and refactor code further. It will save time and make you code faster and refactor faster in React JS.

Find more about reactjs, react tutorials, react js how to guides, step by step react tutorial and react js tutorial examples at WebStylePress by following us.

✅ Display Data From JSON File in React
✅ Display Icons / Images from JSON File in React JS
✅ Fetch All Types of Data from JSON File in React JS
✅ 7 Ways to use Images in React JS
✅ Easy Way to use Images in React JS
✅ Require Image Not Working in React JS
✅ Multiple Images in One Import
✅ Multiple Sets of Images from One Import in React JS
✅ Default Map is not a Function in React JS
✅ Async Await Fetch in React JS
✅ Assigned a Value but Never Used
✅ Easily Sort Before Displaying Records in React JS
✅ Responsive Image Gallery from Scratch in React JS

✅ ReactJS Playground
✅ JavaScript Problem Solving:
✅ Web Development Essentials:
✅ Crash Courses:

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#ReactJS #JavaScript #JS #react #code #refactoring #10x #100x #vscode #extension #WebStylePress #webdevelopment