Component not updating

[puchm]

This is my router:

import { createBrowserRouter, Link, makeRouteConfig, Route } from 'found';

export const Router = createBrowserRouter({
    routeConfig: makeRouteConfig(
        <Route path='/'>
            <Route 
                path='/a'
                Component={() => <div>You are on A. Go to <Link to='/b'>B</Link></div>}
            />
            <Route
                path='/b'
                Component={() => <div>You are on B. Go to <Link to='/a'>A</Link></div>}
            />
        </Route>
    )
})

And I am rendering it to the DOM like this:

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Router/>
  </React.StrictMode>
);

I start using the application on the /a path which displays fine. I then click the link which changes the link in the browser's address bar but does not render the other component. What am I doing wrong? Does this have something to do with React 18? I saw there is an issue open right now regarding React 18 but that was resolved "by miracle" and I am not able to resolve it. Should I try downgrading React?

These are the versions I am using:

"react-dom": "^18.0.0",
"react": "^18.0.0",
"found": "^1.1.1",

[puchm]

I tried one more thing and it worked. Changing the ReactDOM invocation to the "classic" way works.

This is what create-react-app gave me:

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(
  <React.StrictMode>
    <Router/>
  </React.StrictMode>
);

I replaced it with this:

ReactDOM.render(
  <React.StrictMode>
    <Router/>
  </React.StrictMode>,
  document.getElementById('root')
)

Would definitely be interesting to find out why though - especially since the way that doesn't work seems to be the default.

[heyhippari]

Would definitely be interesting to find out why though - especially since the way that doesn't work seems to be the default.

Per the React 18 migration instructions:

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17.

So it seems like Found is incompatible with React 18, without it running in React 17-compatible mode.

[tslater]

It isn't rendering for me--even in 17-compat mode.

[jquense]

Hey folks sorry. I'm just getting to upgrade to react 18 with a few big projects so I will be able to better test and debug this. Hopefully with a fix

[jquense]

The problem seems to be StrictMode not react 18. my initial tests show it working fine in react 18

[tslater]

@jquense good catch. I can confirm that on my end as well, removing StrictMode gets things working, React 18 works fine without it.

[jquense]

I have been nerd sniped into working on this today, and so far what I gather is that most of the issues are due react 18 strict mode double mounting components, and side effects in lifecycles. Hoping its pretty easy to fix

[jquense]

should be fixed in https://github.com/4Catalyzer/found/commit/5c82516d93f93b94d1e16b7bfb216286074ae18d and released as 1.1.2, please test it out

[tslater]

@jquense Works great with StrictMode. Nice, fast work. Thanks so much!!!