hidden-with-state.js

export const UserAvatar = () => {
  const [isHidden, setHidden] = React.useState(false);
  
  // Will instantly hide the component, causing a jarring UX
  if (isHidden) {
    return null;
  }
  
  return (
    <>
      <img src="https://some.png" />
    
      <button onClick={() => setHidden(!isHidden)}>Toggle me!</button>
    </>
  );
}