AbdelrhmanAmin

// Pop quiz! What gets logged?
var o = {
    [console.log('before')]: 4,

    foo: (function () {
        console.log('nope :(');
        throw 'nope'
    })(),

    [console.log('after')]: 4

AbdelrhmanAmin

//  The problem is that I did have dynamic pages with things like `:id`, `:page`...etc
// and if someone decided to manipulate the url and enter a random id, the app would show the page but of course it would be broken.
// So I decided to create a wrapper component to manager to fetch the server and check  if the id is valid. You can tweak this code to your own needs..

export const DynamicRouteManager = ({ children, fetcher }) => {
  const flags = useRef({
    isFirstRender: true,
    didValidate: false,
  });
  const invalidRoutes = useRef([]);

AbdelrhmanAmin

const INITIAL_MAX_HEIGHT = 10000;

const Collapse = ({ children }) => {
  const collapseMenuRef = React.useRef(null);
  const isFirstRender = React.useRef(true);
  const maxHeightRef = React.useRef(INITIAL_MAX_HEIGHT);
  const [isOpen, setOpen] = React.useReducer((state) => !state, false);
  React.useEffect(() => {
    if (collapseMenuRef.current && !isFirstRender.current) {
      if (