Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Use non-reactive callbacks for some methods (#1948)

* Use non-reactive callbacks for some methods

* Remove unnecessary state

* Use non-reactive callbacks for modals

authored by

dan and committed by
GitHub
a8aed2c3 a10adf89

+34 -39
+6 -8
src/state/lightbox.tsx
··· 1 1 import React from 'react' 2 2 import {AppBskyActorDefs} from '@atproto/api' 3 + import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' 3 4 4 5 interface Lightbox { 5 6 name: string ··· 42 43 null, 43 44 ) 44 45 45 - const openLightbox = React.useCallback( 46 - (lightbox: Lightbox) => { 47 - setActiveLightbox(lightbox) 48 - }, 49 - [setActiveLightbox], 50 - ) 46 + const openLightbox = useNonReactiveCallback((lightbox: Lightbox) => { 47 + setActiveLightbox(lightbox) 48 + }) 51 49 52 - const closeLightbox = React.useCallback(() => { 50 + const closeLightbox = useNonReactiveCallback(() => { 53 51 let wasActive = !!activeLightbox 54 52 setActiveLightbox(null) 55 53 return wasActive 56 - }, [setActiveLightbox, activeLightbox]) 54 + }) 57 55 58 56 const state = React.useMemo( 59 57 () => ({
+13 -22
src/state/modals/index.tsx
··· 5 5 6 6 import {ImageModel} from '#/state/models/media/image' 7 7 import {GalleryModel} from '#/state/models/media/gallery' 8 + import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' 8 9 9 10 export interface ConfirmModal { 10 11 name: 'confirm' ··· 236 237 } 237 238 238 239 export function Provider({children}: React.PropsWithChildren<{}>) { 239 - const [isModalActive, setIsModalActive] = React.useState(false) 240 240 const [activeModals, setActiveModals] = React.useState<Modal[]>([]) 241 241 242 - const openModal = React.useCallback( 243 - (modal: Modal) => { 244 - setActiveModals(activeModals => [...activeModals, modal]) 245 - setIsModalActive(true) 246 - }, 247 - [setIsModalActive, setActiveModals], 248 - ) 242 + const openModal = useNonReactiveCallback((modal: Modal) => { 243 + setActiveModals(modals => [...modals, modal]) 244 + }) 249 245 250 - const closeModal = React.useCallback(() => { 251 - let totalActiveModals = 0 252 - let wasActive = isModalActive 253 - setActiveModals(activeModals => { 254 - activeModals = activeModals.slice(0, -1) 255 - totalActiveModals = activeModals.length 256 - return activeModals 246 + const closeModal = useNonReactiveCallback(() => { 247 + let wasActive = activeModals.length > 0 248 + setActiveModals(modals => { 249 + return modals.slice(0, -1) 257 250 }) 258 - setIsModalActive(totalActiveModals > 0) 259 251 return wasActive 260 - }, [setIsModalActive, setActiveModals, isModalActive]) 252 + }) 261 253 262 - const closeAllModals = React.useCallback(() => { 254 + const closeAllModals = useNonReactiveCallback(() => { 263 255 setActiveModals([]) 264 - setIsModalActive(false) 265 - }, [setActiveModals, setIsModalActive]) 256 + }) 266 257 267 258 unstable__openModal = openModal 268 259 unstable__closeModal = closeModal 269 260 270 261 const state = React.useMemo( 271 262 () => ({ 272 - isModalActive, 263 + isModalActive: activeModals.length > 0, 273 264 activeModals, 274 265 }), 275 - [isModalActive, activeModals], 266 + [activeModals], 276 267 ) 277 268 278 269 const methods = React.useMemo(
+15 -9
src/state/shell/composer.tsx
··· 1 1 import React from 'react' 2 2 import {AppBskyEmbedRecord} from '@atproto/api' 3 + import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' 3 4 4 5 export interface ComposerOptsPostRef { 5 6 uri: string ··· 47 48 48 49 export function Provider({children}: React.PropsWithChildren<{}>) { 49 50 const [state, setState] = React.useState<StateContext>() 51 + 52 + const openComposer = useNonReactiveCallback((opts: ComposerOpts) => { 53 + setState(opts) 54 + }) 55 + 56 + const closeComposer = useNonReactiveCallback(() => { 57 + let wasOpen = !!state 58 + setState(undefined) 59 + return wasOpen 60 + }) 61 + 50 62 const api = React.useMemo( 51 63 () => ({ 52 - openComposer(opts: ComposerOpts) { 53 - setState(opts) 54 - }, 55 - closeComposer() { 56 - let wasOpen = !!state 57 - setState(undefined) 58 - return wasOpen 59 - }, 64 + openComposer, 65 + closeComposer, 60 66 }), 61 - [setState, state], 67 + [openComposer, closeComposer], 62 68 ) 63 69 64 70 return (