Extract React function component

Extract JSX element or fragment into a React Function Component.

Extract React function component

How do I perform this refactoring?

  1. Select the JSX element that you want to extract, e.g., using smart expand selection.
  2. Open the extract context menu.
  3. Extract the component.
  4. Enter a name for the extracted component.

Why is this refactoring helpful?

Extracting a React component helps you modularize your code. The extracted component can be reused, documented, and tested separately. The original code becomes more concise and readable, especially if you choose a descriptive component name.

What do I need to consider?

P42 analyzes only the file that you are currently working on. Type information might be accurate, and the parameter type signature of the extracted Function Component might contain unknown types.

Configuration

Related Code Assists

Learn More

Available In