equinor / equinor/fusion-framework

Migrate render-component.tsx to React 18 createRoot API

Open
#3,505 0 comments 0 reactions 0 assignees View on GitHub
👾 React 🧨 breaking changes
Dominant language
TypeScript
Stars
10
Forks
10
Avg merge
19h 40m
Merged PRs (30d)
150

Description

## Description

Migrate `packages/react/app/src/render-component.tsx` from the deprecated `ReactDOM.render()` API to the React 18 `createRoot()` API.

## Current State
- Currently uses `ReactDOM.render()` and `ReactDOM.unmountComponentAtNode()` (deprecated in React 18)
- Already has commented React 18 implementation using `createRoot()`

## Implementation Steps
1. Replace `ReactDOM.render()` with `createRoot().render()`
2. Replace `ReactDOM.unmountComponentAtNode()` with `root.unmount()`
3. Remove the deprecated `renderComponent` and `renderApp` functions
4. Update imports to use `createRoot` from 'react-dom/client'

## Files to Update
- `packages/react/app/src/render-component.tsx`
- `packages/react/app/src/render-app.ts` (remove deprecated function)

## Testing
- Ensure existing functionality still works
- Test both mounting and unmounting scenarios
- Verify compatibility with existing cookbooks

## Labels
👾 React, 🧨 breaking changes

Contributor guide

Open the contributing guide

Research direction

Start with packages/react/app/src/render-component.tsx and compare the current implementation with its commented React 18 version; then inspect packages/react/app/src/render-app.ts for the deprecated function. The work is done when mounting and unmounting still function through the React 18 API and existing cookbooks remain compatible.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Refactor
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.