starred/nocturne-ui

Fork 0

mirror of https://github.com/usenocturne/nocturne-ui.git synced 2026-04-25 07:45:52 +03:00

[PR #98] [MERGED] Prevent global rerender while gradient is changing #119

New issue

Closed

opened 2026-02-28 15:42:14 +03:00 by kerem · 0 comments

kerem commented

2026-02-28 15:42:14 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/usenocturne/nocturne-ui/pull/98
Author: @alvvaro
Created: 4/24/2025
Status: ✅ Merged
Merged: 4/25/2025
Merged by: @brandonsaldan

Base: main ← Head: alvvaro/fix-gradient-rerenders

📝 Commits (7)

7cbb946 rename useGradientState to useGradientTransition
c8c9585 Create useGradientState.js
5c9d0d2 Create GradientBackground.jsx
30113d7 implement GradientBackground and useGradientState
013264c fix GradientBackground import
57fcbbd memoize useGradientState
c0aefd7 add className prop to GradientBackground

📊 Changes

9 files changed (+586 additions, -604 deletions)

View changed files

📝 src/App.jsx (+3 -20)
📝 src/components/auth/AuthScreen.jsx (+3 -20)
📝 src/components/auth/NetworkScreen.jsx (+3 -20)
📝 src/components/auth/PairingScreen.jsx (+3 -20)
➕ src/components/common/GradientBackground.jsx (+41 -0)
📝 src/components/tutorial/Tutorial.jsx (+3 -20)
📝 src/hooks/useGradientState.js (+20 -503)
➕ src/hooks/useGradientTransition.js (+509 -0)
📝 src/pages/Home.jsx (+1 -1)

📄 Description

This PR splits useGradientState into two hooks, useGradientState and useGradientTransition, and creates a new component, GradientBackground. The goal is to prevent the whole app tree from rerendering while the background gradient changes.

The first hook's signature is similar to useState's, returning a tuple of [gradientState, setGradientState]. The former is passed to GradientBackground, and the latter is a drop-in replacement to updateGradientColors.

useGradientTransition is the previously existing hook, just renamed. This time it is only consumed inside GradientBackground.

GradientBackground is a leaf component, so the transition is localized there and its rerenders don't affect the rest of the app.

Before:

After:

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/usenocturne/nocturne-ui/pull/98 **Author:** [@alvvaro](https://github.com/alvvaro) **Created:** 4/24/2025 **Status:** ✅ Merged **Merged:** 4/25/2025 **Merged by:** [@brandonsaldan](https://github.com/brandonsaldan) **Base:** `main` ← **Head:** `alvvaro/fix-gradient-rerenders` --- ### 📝 Commits (7) - [`7cbb946`](https://github.com/usenocturne/nocturne-ui/commit/7cbb9461d86de10adecf0feca81e1c15ea105313) rename useGradientState to useGradientTransition - [`c8c9585`](https://github.com/usenocturne/nocturne-ui/commit/c8c95852d48a9d721c790501ae6dc1fa63b65391) Create useGradientState.js - [`5c9d0d2`](https://github.com/usenocturne/nocturne-ui/commit/5c9d0d2d47250ff55bb2a37992942b5665343e40) Create GradientBackground.jsx - [`30113d7`](https://github.com/usenocturne/nocturne-ui/commit/30113d751ccc7650de0b2dd694770f5b56705b00) implement GradientBackground and useGradientState - [`013264c`](https://github.com/usenocturne/nocturne-ui/commit/013264cbb9717467de923af318c575367663ceb8) fix GradientBackground import - [`57fcbbd`](https://github.com/usenocturne/nocturne-ui/commit/57fcbbd14db39fcac9e28ffdc912cd6751fd4170) memoize useGradientState - [`c0aefd7`](https://github.com/usenocturne/nocturne-ui/commit/c0aefd726a45aeace9290b99fc0ee84317f7db49) add className prop to GradientBackground ### 📊 Changes **9 files changed** (+586 additions, -604 deletions) <details> <summary>View changed files</summary> 📝 `src/App.jsx` (+3 -20) 📝 `src/components/auth/AuthScreen.jsx` (+3 -20) 📝 `src/components/auth/NetworkScreen.jsx` (+3 -20) 📝 `src/components/auth/PairingScreen.jsx` (+3 -20) ➕ `src/components/common/GradientBackground.jsx` (+41 -0) 📝 `src/components/tutorial/Tutorial.jsx` (+3 -20) 📝 `src/hooks/useGradientState.js` (+20 -503) ➕ `src/hooks/useGradientTransition.js` (+509 -0) 📝 `src/pages/Home.jsx` (+1 -1) </details> ### 📄 Description This PR splits `useGradientState` into two hooks, `useGradientState` and `useGradientTransition`, and creates a new component, `GradientBackground`. The goal is to prevent the whole app tree from rerendering while the background gradient changes. The first hook's signature is similar to `useState`'s, returning a tuple of `[gradientState, setGradientState]`. The former is passed to `GradientBackground`, and the latter is a drop-in replacement to `updateGradientColors`. `useGradientTransition` is the previously existing hook, just renamed. This time it is only consumed inside `GradientBackground`. `GradientBackground` is a leaf component, so the transition is localized there and its rerenders don't affect the rest of the app. Before: ![Screen Recording 2025-04-24 at 19 46 37](https://github.com/user-attachments/assets/b98b07e0-06cd-4404-bac5-19024b2537f9) After: ![Screen Recording 2025-04-24 at 19 42 51](https://github.com/user-attachments/assets/f9fd1a32-b9f3-4ee1-a242-6092a21c47f2) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem

2026-02-28 15:42:14 +03:00

closed this issue
added the
pull-request
label

No labels

help wanted

pull-request

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/nocturne-ui#119

No description provided.

Rows
Columns