Theo's Typesafe Cult•2y ago

Running before unmount on server components??

is there a way to wrap a react server component in a function that passes props to it and call something after component is dismounted or something? I know in client components I can make use of useEffect to call stuff before component is dismounted, but not sure how to do the same for server components. what we basically want to do is: 1. create instance of a thing 2. make it available to the component (could be a hook or props , doesn't matter) 3. make sure that the thing executes a function before the component unmounts

8 Replies

Brendonovich•2y ago

Can't say for sure, but I'd assume that this isn't possible? Server components don't really have a lifecycle that runs on the client, they're pretty much just html

bedesquiOP•2y ago

that's my assumption too...

cje•2y ago

If you need lifecycle stuff, you need client components And hooks don’t run in RSCs A hacky solution for a mostly RSC tree could be to add a single client component to a leaf of it that’s basically just a useEffect cleanup

bruno!•2y ago

this looks like just a server component wrapped to a client component with an effect cleanup

// UnmountAware
type Props = {
  children: ReactNode
  onUnmount: () => void;
}

export const UnmountAware = ({children, onUnmount}: Props) => {
  useEffect(() => {
    return onUnmoun
  }, [onUnmount])

   return children;
}

// UnmountAware
type Props = {
  children: ReactNode
  onUnmount: () => void;
}

export const UnmountAware = ({children, onUnmount}: Props) => {
  useEffect(() => {
    return onUnmoun
  }, [onUnmount])

   return children;
}

or maybe as Igor said, this might be writteable as a hoc

bruno!•2y ago

bruno!•2y ago

using wrapper components seems to work btw

cje•2y ago

Yea donut pattern is the same as a leaf

bruno!•2y ago

ah, just got the leaf ideia, it's actually way better

Gaming

Programming

Running before unmount on server components??