Atlassian's Forge platform extends React's state and lifecycle management hooks in unique ways across its UI Kit versions. Understanding these implementations helps developers effectively build dynamic Forge apps.
- Forge UI Kit 1 implements hooks server-side with Atlassian-specific adaptations
- UI Kit 2 and Custom UI use standard React hook implementations
- useEffect and async handling differ notably between UI Kit versions
What happened
Atlassian's Forge platform utilizes hooks to allow developers to manage state and side effects conveniently when building UI components. The platform supports different UI Kit versions—UI Kit 1, UI Kit 2, and Custom UI—with distinct hook implementations. UI Kit 1 hooks mimic React hooks like useState and useEffect but operate on a server-side Function-as-a-Service model and come with Atlassian-specific custom hooks unique to Forge.
In UI Kit 2 and Custom UI, the hooks implemented are the standard React versions, providing a more familiar experience to React developers but losing direct access to some Atlassian-specific hooks through @forge/ui. However, developers can still access product context and other data through the @forge/bridge library, compensating for these differences.
Why it matters
Understanding how Forge's hook implementations work across UI Kit versions is crucial to prevent unexpected behavior when building or migrating apps. While UI Kit 1 hooks resemble React's, their server-side execution and Atlassian-specific custom hooks mean developers must adjust their coding approach accordingly.
Handling side effects and asynchronous operations with useEffect varies between the versions. For example, in UI Kit 1, useEffect can be made asynchronous with specific adjustments, whereas in vanilla React and UI Kit 2, useEffect should not directly return promises. Correctly managing these differences ensures app reliability and a smoother developer experience.
What to watch next
Developers should monitor Atlassian's Forge announcements and community forums for updates on hook implementations, especially as the platform continues evolving UI Kit 2 and Custom UI. Sharing real-world examples of differences helps the community avoid pitfalls and encourages better Forge app design patterns.
Further exploration of Forge’s capabilities around asynchronous data fetching and lifecycle management will also be important. Developers interested in advanced hook usage should experiment with both UI Kit implementations and leverage @forge/bridge for accessing product context outside UI Kit hooks.