Skip to content

Conversation

dwesolow
Copy link
Contributor

@dwesolow dwesolow commented Sep 2, 2025

📝 Description

This PR enables react compiler. As you can see in the lint CI job, we have bunch of errors there. Lot's of them are because compiler cannot replace 1:1 our memo
(e.g.
incorrect (current state):

const allMediaItems: (MediaItem | TestMediaItem)[] = useMemo(() => {
        const { isSuccess, data } = mediaItemsQuery;

        if (isSuccess && !isNil(data)) {
            return data.pages.flatMap((item) => item.media as T[]);
        }

        return [];
}, [mediaItemsQuery]);

correct (without eslint warning):

const { isSuccess, data } = mediaItemsQuery;
const allMediaItems: (MediaItem | TestMediaItem)[] = useMemo(() => {
        if (isSuccess && !isNil(data)) {
            return data.pages.flatMap((item) => item.media as T[]);
        }

        return [];
}, [isSuccess, data]);

)

or we use ref during the render (Cannot access refs during render). I think the memo errors we should fix but I'm not sure if we should fix ref issues. Please check the lint logs. I'm waiting for your feedback.

✨ Type of Change

Select the type of change your PR introduces:

  • 🐞 Bug fix – Non-breaking change which fixes an issue
  • 🚀 New feature – Non-breaking change which adds functionality
  • 🔨 Refactor – Non-breaking change which refactors the code base
  • 💥 Breaking change – Changes that break existing functionality
  • 📚 Documentation update
  • 🔒 Security update
  • 🧪 Tests

🧪 Testing Scenarios

Describe how the changes were tested and how reviewers can test them too:

  • ✅ Tested manually
  • 🤖 Run automated end-to-end tests

✅ Checklist

Before submitting the PR, ensure the following:

  • 🔍 PR title is clear and meaningful
  • ✍️ PR description clearly explains the changes and their reason
  • 📝 I have linked the PR to the corresponding GitHub Issues, if any
  • 💬 I have commented my code, especially in hard-to-understand areas
  • 📄 I have made corresponding changes to the documentation
  • ✅ I have added tests that prove my fix is effective or my feature works

@dwesolow dwesolow self-assigned this Sep 2, 2025
@Copilot Copilot AI review requested due to automatic review settings September 2, 2025 12:14
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces the React Compiler to the project by adding the necessary babel plugin configuration and updating dependencies. The React Compiler helps optimize React components by automatically handling memoization and reducing unnecessary re-renders.

  • Configures React Compiler through babel plugin in the build system
  • Updates React hooks ESLint plugin to support React Compiler
  • Refactors ImgBoxes component from function call pattern to proper JSX component usage

Reviewed Changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated no comments.

File Description
web_ui/rsbuild.config.ts Adds babel plugin configuration to enable React Compiler
web_ui/package.json Adds React Compiler dependencies and updates ESLint plugin version
web_ui/eslint.config.js Adds commented ESLint rule for React refs during render
web_ui/src/pages/create-project/components/select-project-template/utils.tsx Converts ImgBoxes from function call to proper React component with props
Files not reviewed (1)
  • web_ui/package-lock.json: Language not supported

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@github-actions github-actions bot added the UI label Sep 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant