How to run code in React function component before first render, like in the constructor of a class component?

Question

I have a piece of code in React Native that currently runs on app start. Within a class component constructor. It checks a bunch of conditions using the React Navigation state and then navigates somewhere.

class MyComponent<Props> {
  constructor(props: Props) {
    super(props);
    // Some initialization code
  }
}

I refactored it to use hooks using both useEffect and useLayoutEffect, but the code run now seems to happen only after the initial rendering, causing a flicker of another screen before the navigation takes place.

function MyComponent() {
  useEffect(() => {
    // Do some stuff
  }, []);  

  return null;
}

Is there some equivalent to the class constructor that runs before rendering in function components?

I refactored it to use hooks using both useEffect and useLayoutEffect, but the navigation now seems to happen only after the initial rendering, causing a flicker of another screen before the navigation takes place. Pretty hard to debug code we can't see — CertainPerformance
– CertainPerformance, Commented Jun 19, 2021 at 19:42
you can use a splash screen, then call SplashScreen.hide() when your app is ready - github.com/crazycodeboy/react-native-splash-screen — Someone Special
– Someone Special, Commented Jun 19, 2021 at 19:45

phsource · Accepted Answer · 2021-06-19 20:39:03Z

2

Ah, I figured out a solution.

Before, I'd written the code this way:

function MyComponent() {
  useEffect(() => {
    // Do some stuff
  }, []);  

  return null;
}

Turns out the equivalent is just running your code in the function itself, since that runs before the actual rendering-to-screen.

function MyComponent() {
  const initializedRef = useRef(false);
  if (!initializedRef.current) {
    initializedRef.current = true;
    // Do some stuff
  }

  return null;
}

This seems to be as fast as the run-in-constructor code I used to have.

answered Jun 19, 2021 at 20:39

phsource

2,46624 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to run code in React function component before first render, like in the constructor of a class component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related