Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Option to skip first render

See original GitHub issue

I have a situation with a client-side router (a fork of React Router v3) which does an initial empty render to match routes - returning null - then a second render that actually renders the app. I’m also server-side rendering - so the DOM is already populated - and when the client renders the first time, there’s a flash of empty page caused by route matching, then the app is rendered again.

This is not an issue with Preact, but the only solution I found was to make Preact.render ignore the first render. It required only very minor changes: for render() to pass an initial context to diff()…

export function render(vnode, parent, merge, context = {}) {
  return diff(merge, vnode, context, false, parent, false)
}

Then for diff to ignore rendering if specified:

export function diff(dom, vnode, context, mountAll, parent, componentRoot) {

  if (!vnode && context && context.ignoreFirstRender) {
    delete context.ignoreFirstRender
    return dom
  }

  ...

Would you consider adding such an option to Preact? I know the real solution would be to rewrite the route matching algorithm to not require an initial empty render, but that seemed to be much more complex.

Issue Analytics

State:
Created 6 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

marvinhagemeistercommented, Mar 11, 2019

Async rendering is something that’s on our minds, but will take a bit of time to get it working. Let’s continue the discussion in #862 or #526

0reactions

developitcommented, May 20, 2017

Yup. It would also enable awesome stuff like waiting to update components until there are some CPU cycles free.

Top Results From Across the Web

reactjs - With useEffect, how can I skip applying an effect upon ...

In this example from the guide it's expected that count is 0 only on initial render: const [count, setCount] = useState(0);.

Skip useEffect Hook on the First Render | Nikola Margit

The most straightforward way is by using a boolean flag that will tell the useEffect if it's initial render or not. We will...

Prevent useEffect's callback firing during initial render

To prevent this from happening, we need a variable that can be set to false after the initial render. We can then use...

useEffect skip first render - CodeSandbox

useEffect skip first render - CodeSandbox. You need to enable JavaScript to run this app.

Using the Effect Hook - React

Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution. Does useEffect run after every render?