React Native Functional Components

functional-components

Functional components in React Native are a simpler way to define components using JavaScript functions. Unlike class components, which use class syntax and lifecycle methods, functional components are stateless (before the introduction of React Hooks) and rely on function input (props) to render UI elements.

Since the introduction of React Hooks in React 16.8, functional components can now handle state and other React features previously only available in class components, making them the preferred way to write components in modern React Native applications.

Key Features of Functional Components in React Native:
Simpler Syntax: Functional components are just JavaScript functions that return JSX. They are generally shorter and easier to write compared to class components.

jsx
Copy code
const MyComponent = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};
Props as Arguments: Functional components receive props (properties) as an argument. You can use props to pass data from a parent component to a child component.

jsx
Copy code
const Greeting = (props) => {
  return <Text>Hello, {props.name}!</Text>;
};

// Usage
<Greeting name="John" />
Stateless Before Hooks: Before React Hooks, functional components were stateless, meaning they could not manage internal state or use lifecycle methods. However, with Hooks, functional components can now manage state and side effects.

Hooks in Functional Components: React Hooks allow functional components to use state, side effects, context, and more, without the need for class components.

useState(): Allows you to add state to a functional component.

jsx
Copy code
import React, { useState } from 'react';

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

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};
useEffect(): Allows you to handle side effects such as fetching data, setting up subscriptions, or manually changing the DOM.

jsx
Copy code
import React, { useEffect, useState } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []); // Empty array means the effect runs only once (componentDidMount)

  return (
    <View>
      {data.map((item) => (
        <Text key={item.id}>{item.title}</Text>
      ))}
    </View>
  );
};
useContext(): Allows you to access context in a functional component.

jsx
Copy code
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);
  return <Text>The current theme is {theme}</Text>;
};
No Lifecycle Methods, but Effects: In functional components, you don't use lifecycle methods like componentDidMount or componentDidUpdate. Instead, you handle those behaviors using the useEffect Hook.

Reusability: Functional components are lightweight and more reusable. You can easily compose them together to build complex UIs.

Example of Functional Components in React Native:
jsx
Copy code
import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';

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

  useEffect(() => {
    console.log(`Component mounted or count updated to: ${count}`);
    return () => {
      console.log('Cleanup if necessary when component unmounts or before updating');
    };
  }, [count]);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default MyComponent;
Key Advantages of Functional Components:
Simplicity: Functional components are typically shorter and easier to read.
Performance: Functional components are slightly more performant as they don’t carry the overhead of class components (e.g., this keyword and binding methods).
Hooks: Hooks make functional components extremely powerful, enabling state, effects, context, and more within a simple function.
Cleaner Code: Without lifecycle methods cluttering the component, functional components often result in cleaner, more maintainable code.