Functional Components In React Native

Why Functional Components?

• Simplicity:- Functional components are simpler and more concise compared to class component.

• Readability:- The functional syntax is more readable, reducing the cognitive load for developers when reviewing or working with code.

• Hooks Support: Functional components in React Native are simpler and pair seamlessly with hooks, enabling easy state management and Lifecycle handling, making code cleaner and more concise.

• Performance: Functional components, especially when combined with React's memoization techniques, can offer better performance optimizations. They allow for more efficient rendering and updates.

• Reusability : Functional components promote the use of pure functions, which makes them more reusable. This reusability is beneficial for creating modular and maintainable code.

How to Create a Functional Component

import React from 'react';
import { View } from "react-native";

const MyComponent = () => {
  // Your component logic goes here
  return (
    <View>
      {/* UI Related Code Goes Here */}
    </View>
  );
}

export default MyComponent;

• On above code the basic structure of Component looks like, Now we will see what is meaning of each line.

• Import Statements:

  • import React from 'react';: Imports the core React library, allowing you to create React components.

  • import { View } from 'react-native';: Imports the View component from the React Native library, which is used to structure and organize UI elements.

• Functional Component:

  • const MyComponent = () => { ... }: Declares a functional component named MyComponent using arrow function syntax.

• Component Logic:

  • // Your component logic goes here: Placeholder comment where you can add the logic specific to your component.

• Return Statement:

  • return ( ... );: Returns a JSX structure representing the UI of your component.

• JSX Structure:

  • <View>...</View>: Uses the <View> component from React Native to encapsulate the UI elements of your component.

• Comment within JSX:

  • {/* UI Related Code Goes Here */}: A comment within JSX to describe or annotate UI-related code.

• Export Statement:

  • export default MyComponent;: Exports the MyComponent so that it can be imported and used in other parts of your application.

How to Use the MyComponent in Another React Native Component?

import React from 'react';
import { View, Text } from 'react-native';
import MyComponent from './MyComponent';  // Assuming MyComponent is in the same directory

const App = () => {
  return (
    <View>
      <Text>Inside App Component</Text>
      <MyComponent />  {/* Include MyComponent within App */}
    </View>
  );
}

export default App;

Use Cases and Examples

Presentational Components: Functional components are ideal for presentational components that are mainly responsible for displaying UI elements. For instance, a Button, Header, or Avatar component that primarily receives props and renders a UI without managing complex state.

const Button = ({ label, onPress }) => (
  <TouchableOpacity onPress={onPress}>
    <View style={styles.buttonContainer}>
      <Text style={styles.buttonLabel}>{label}</Text>
    </View>
  </TouchableOpacity>
)

List Items in a FlatList: When rendering a list of items using FlatList, functional components can be concise and efficient for rendering each item.

const ListItem = ({ item }) => (
  <View style={styles.listItem}>
    <Text>{item.title}</Text>
  </View>
);

const MyList = ({ data }) => (
  <FlatList
    data={data}
    renderItem={({ item }) => <ListItem item={item} />}
    keyExtractor={(item) => item.id.toString()}
  />
);

Reusable UI Components: Functional components are excellent for creating reusable UI components that encapsulate a specific piece of functionality.

const Card = ({ title, content }) => (
  <View style={styles.card}>
    <Text style={styles.cardTitle}>{title}</Text>
    <Text>{content}</Text>
  </View>
);

Functional Components with Hooks: Utilize hooks like useState and useEffect in functional components for managing local state and handling side effects.

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>{count}</Text>
      <Button label="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};