React fundamentals: Defining components before export or as parameters for the export function?

Question

This might be very basic. On https://reactnative.dev/docs/intro-react they have shown examples with "export default" at the end, and definition of components before "export default" , e.g.:

import React from 'react';
import { Text, TextInput, View } from 'react-native';

const Cat = () => {
  return (
    <View>
      <Text>I am also a cat!</Text>
    </View>
  );
}

const Cafe = () => {
  return (
    <View>
      <Text>Welcome!</Text>
      <Cat />
      <Cat />
      <Cat />
    </View>
  );
}

export default Cafe;

Later while reading https://reactnavigation.org/docs/params/, I noticed there seems to be a different format for the function component, with other components defined within curly brackets, like this:

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

I wonder whether the latter format is equivalent to that in the first example, and tried the following:

import React from 'react';
import { Text, TextInput, View } from 'react-native';

export default function App() {
const Cat = () => {
  return (
    <View>
      <Text>I am also a cat!</Text>
    </View>
  );
}

const Cafe = () => {
  return (
    <View>
      <Text>Welcome!</Text>
      <Cat />
      <Cat />
      <Cat />
    </View>
  );
}

return(<Cafe/>);
}

Indeed the results are the same from test preview @ https://snack.expo.io/. Change the last return to return(<View><Cat/> <Cafe/> </View>);, or change the name to export default function testApp() { also works. Although both work, but I don't know what are the differences/advantages for these two formats, and would like to know more.

score 2 · Answer 1 · answered Mar 05 '21 at 14:16

Regular functions are different from fat arrow functions (() => {}) in that they don't have their own this context. You mentioned both types of functions and I want to be clear that it has nothing to do with how symbols are exported.

As for the exports, it does not really matter whether you export the symbol right away using export default () => {} or define it first for the local scope and only then export, since in the case of React components, you usually don't reuse the default exported symbol in the file. I usually go for the latter, since it makes the function definition line shorter hence allowing for more arguments to be fit on one line without wrapping.

You can export your component both with default and as a named export also:

export const SomeComponent = () => {};
export default SomeComponent;

This way, you would have more ways to import SomeComponent

// default import
import SomeComponent from './SomeComponent';
// named import
import { SomeComponent } from './SomeComponent';

That is if your file has some kind of a "root" component. There are cases when single file contains multiple components that all reside on a single "importance" level. In that case, you usually don't have a default export at all:

export const ComponentA = () => {};
export const ComponentB = () => {};
export const ComponentC = () => {};
export const ComponentD = () => {};

I don't know what are the consequences based on the statement of your first sentence. On the website "Cafe" is called a component instead of function (there is also class component). What are the differences between component and function besides one starts with const the other with function? The "symbol" you mentioned seems represent both. I agree with you on the default export vs. named export part, as detailed in many other questions on stackoverflow. For the second format, we can't `` import {Cafe} from './App'`` as we didn't export it, right? Any advantage function is used in navigation? — letmeask, Mar 05 '21 at 16:16
@letmeask You should read about the difference [here](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable). — comonadd, Mar 05 '21 at 19:09
I checked the link, great resource for understanding the difference between arrow function and function in JS, e.g., they are nonreplaceable when function use `this`. However, in the code snippets posted here, there is no `this` and only in the second format there is a "function" in the beginning. I tired on https://snack.expo.io/ to replace the line with `export default App() {`, error; replace with `export default Apptest =() =>{`, it works but it warns me "Apptest" is not defined. So, it seems necessary to use function format, maybe specific for React navigation. — letmeask, Mar 07 '21 at 06:39

React fundamentals: Defining components before export or as parameters for the export function?

1 Answers1