tweak rendering

src/components/moderation/Hider.tsx

@@ -33,6 +33,8 @@ const Context = React.createContext<Context>({
   },
 })
 
+export const useScreenHider = () => React.useContext(Context)
+
 export function Outer({
   modui,
   children,
@@ -44,40 +46,33 @@ export function Outer({
   const [isContentVisible, setIsContentVisible] = React.useState(!blur)
   const info = useModerationCauseDescription(blur)
 
-  const meta = React.useMemo(
+  const meta = {
-    () => ({
+    isNoPwi: Boolean(
-      isNoPwi: !!modui.blurs.find(
+      modui.blurs.find(
         cause =>
           cause.type === 'label' &&
           cause.labelDef.identifier === '!no-unauthenticated',
       ),
+    ),
     noOverride: modui.noOverride,
-    }),
+  }
-    [modui],
-  )
 
-  const showInfoDialog = React.useCallback(() => {
+  const showInfoDialog = () => {
     control.open()
-  }, [control])
+  }
 
-  const onSetContentVisible = React.useCallback(
+  const onSetContentVisible = (show: boolean) => {
-    (show: boolean) => {
     if (meta.noOverride) return
     setIsContentVisible(show)
-    },
+  }
-    [setIsContentVisible, meta],
-  )
 
-  const ctx = React.useMemo(
+  const ctx = {
-    () => ({
     isContentVisible,
     setIsContentVisible: onSetContentVisible,
     showInfoDialog,
     info,
     meta,
-    }),
+  }
-    [isContentVisible, onSetContentVisible, info, meta, showInfoDialog],
-  )
 
   return (
     <Context.Provider value={ctx}>
@@ -87,22 +82,12 @@ export function Outer({
   )
 }
 
-export function Content({
+export function Content({children}: {children: React.ReactNode}) {
-  children,
+  const ctx = useScreenHider()
-}: {
+  return ctx.isContentVisible ? children : null
-  children: (context: Context) => React.ReactNode
-}) {
-  const ctx = React.useContext(Context)
-  const child = React.useMemo(() => children(ctx), [ctx, children])
-  return ctx.isContentVisible ? child : null
 }
 
-export function Mask({
+export function Mask({children}: {children: React.ReactNode}) {
-  children,
+  const ctx = useScreenHider()
-}: {
+  return ctx.isContentVisible ? null : children
-  children: (context: Context) => React.ReactNode
-}) {
-  const ctx = React.useContext(Context)
-  const child = React.useMemo(() => children(ctx), [ctx, children])
-  return !ctx.isContentVisible ? child : null
 }

src/view/screens/ProfileList.tsx

@@ -193,10 +193,9 @@ function ProfileListScreenLoaded({
     return (
       <Hider.Outer modui={moderation.ui('contentView')}>
         <Hider.Mask>
-          {() => <ListHiddenScreen list={list} preferences={preferences} />}
+          <ListHiddenScreen list={list} preferences={preferences} />
         </Hider.Mask>
         <Hider.Content>
-          {() => (
           <View style={s.hContentRegion}>
             <PagerWithHeader
               items={SECTION_TITLES_CURATE}
@@ -237,7 +236,6 @@ function ProfileListScreenLoaded({
               accessibilityHint=""
             />
           </View>
-          )}
         </Hider.Content>
       </Hider.Outer>
     )
@@ -245,10 +243,9 @@ function ProfileListScreenLoaded({
   return (
     <Hider.Outer modui={moderation.ui('contentView')}>
       <Hider.Mask>
-        {() => <ListHiddenScreen list={list} preferences={preferences} />}
+        <ListHiddenScreen list={list} preferences={preferences} />
       </Hider.Mask>
       <Hider.Content>
-        {() => (
         <View style={s.hContentRegion}>
           <PagerWithHeader
             items={SECTION_TITLES_MOD}
@@ -278,7 +275,6 @@ function ProfileListScreenLoaded({
             accessibilityHint=""
           />
         </View>
-        )}
       </Hider.Content>
     </Hider.Outer>
   )