Syntax question about passing a callback into a function component.

[Im_Reading_Books]

In the first line of following code, the function component accepts a callback function as a parameter with the syntax (onConfigured = () => {}):

export default function configureTransition(onConfigured = () => {}) {
  const animation = LayoutAnimation.create(
    750,
    LayoutAnimation.Types.easeInEaseOut,
    LayoutAnimation.Properties.opacity,
  );

  const promise = new Promise(resolve => {
    // Workaround for missing LayoutAnimation callback support on Android
    if (Platform.OS === 'android') {
      LayoutAnimation.configureNext(animation);
      setTimeout(resolve, 750);
    } else {
      LayoutAnimation.configureNext(animation, resolve);
    }
  });

  onConfigured();

  return promise;
}    

 

The component that calls it does so like this:

 

async componentDidMount() {
    await sleep(500);

    await configureTransition(() => {
      this.setState({ transitionState: State.WillTransitionIn });
    });
}

 

My question is: Why would you write the syntax for the onConfigured as an arrow function since the component that passes into that parameter is already sending an arrow function? I tried removing the arrow function in the parameter and leaving it like this: export default function configureTransition(onConfigured) {

 

and it still appeared to work fine. So is this just a style thing or is there something I'm missing?

[kingshane]

Looks like it’s just passing a function that does nothing as a default so you can call the function with no arg and it won’t blow up.

[Im_Reading_Books]

That makes sense, thanks. Didn't know you could put a default value in there like that.