Comments (1)
In the majority of cases (11/18) this pattern continues to work. See tables below.
Server execution context
eg. a Next.js page.tsx
and any non-client imports
Shared <Icon> |
Client <Icon> |
Server <Icon> |
|
---|---|---|---|
Shared <ArrowIcon> |
✅ | ❌ | ✅ |
Client <ArrowIcon> |
✅ | ✅ | ✅ |
Server <ArrowIcon> |
✅ | ❌ | ✅ |
Client execution context
eg. a "use client"
module or any imported imports
Shared <Icon> |
Client <Icon> |
Server <Icon> |
|
---|---|---|---|
Shared <ArrowIcon> |
✅ | ✅ | ❌ |
Client <ArrowIcon> |
✅ | ✅ | ❌ |
Server <ArrowIcon> |
❌ | ❌ | ❌ |
Commentary
- If
<Icon>
is a shared component, the pattern works in all cases except when in a client context and theas
prop is a server component. This doesn't work because you can't import and render a server component into a client context. - A server
Icon
always works in a server context but it can never work in a client context because of the same constraint - A client
Icon
can only work in a server context when theas
prop is also a client component. - In a client context only, a client
Icon
can have a sharedas
prop
In my opinion there's nothing that React should do here. The pattern continues to work in the majority of cases, especially if Icon
is a shared component.
from react.
Related Issues (20)
- Bug: test
- cannot upgrade `eslint` to v9 due to `eslint-plugin-react-hooks` peer dependancies HOT 8
- Bug: Wrong detection of non-boolean attribute when working with React API HOT 2
- Cannot find name 'dialog' HOT 2
- Bug: useMemo has a problem of executing multiple times without changing dependencies HOT 2
- Bug: bug de teste
- [React 19] Export SuspenseException HOT 2
- [React 19] [bug] SVG with dangerouslySetInnerHTML content does not trigger first click HOT 8
- [React 19] - `ReactElement` created from `React.createElement` are not renderable anymore HOT 3
- [Compiler Bug]: function parameter inside component override outer parameter incorrectly
- forceUpdate not work in child component GuardGraph
- [React 19] useOptimistic is not updating its optimistic collection immediately HOT 6
- Bug: useEffect and Event Handler Timing Regressions in React 18 Legacy Mode HOT 1
- [DevTools Bug]: No way to debug suspense events
- [Compiler Bug]: setState in useEffect / react compiler and eslint hooks plugin HOT 1
- [DevTools Bug] Cannot add node "20468" because a node with that id is already in the Store. HOT 1
- [Help Wanted] How can I become a member of reactjs? HOT 1
- [React 19]useEffect cleaned the wrong state in StrictMode HOT 7
- Inability to prioritise hydration & react yields too willingly HOT 2
- [DevTools Bug]: Script tag connection method not working in 6.0.0 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.