React : Props, State, and Lifecycle Methods

Props and State in Class Components

Class components in React are defined using ES6 classes. Two central concepts in these components are props and state.

• Props are read-only attributes used to pass data from a parent component to a child component. They make components reusable by giving them the ability to receive data from their parent component.
• State is a component’s private data. It allows components to create and manage their own data. State changes can be asynchronous, and updating the state re-renders the component.

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { age: 25 };
  }

  render() {
    return (
      <div>
        <h1>{this.props.name}</h1>
        <p>Age : {this.state.age}</p>
      </div>
    );
  }
}

But…

Props and State in Functional Components with Hooks

With the introduction of Hooks in React 16.8, functional components gained the ability to use state and other React features without writing a class.

• useState() is a Hook that lets you add React state to functional components.

import React, { useState } from 'react';

function UserProfile({ name }) {
  const [age, setAge] = useState(25);

  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
}

Lifecycle Methods in Class Components

Lifecycle methods in class components allow you to run code at specific points in a component’s lifecycle, such as when it mounts, updates, or unmounts.

• componentDidMount(): Invoked immediately after a component is mounted. Perfect for initialization operations such as fetching data.
• componentDidUpdate(): Invoked immediately after updating occurs. Use it for DOM updates based on state or props changes.
• componentWillUnmount(): Invoked immediately before a component is unmounted and destroyed. Useful for cleanup activities like invalidating timers.

class UserProfile extends React.Component {
  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate() {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>User Profile</div>;
  }
}

Lifecycle Methods in Functional Components with useEffect()

For functional components, the useEffect() Hook serves the purpose of lifecycle methods, enabling side effects in these components.

• useEffect(): Accepts a function that contains imperative, possibly effectful code. The first argument is the effect itself, and the second argument is the array of dependencies.

import React, { useEffect } from 'react';

function UserProfile({ name }) {
  useEffect(() => {
    console.log('Component did mount');

    return () => {
      console.log('Component will unmount');
    };
  }, []);

  useEffect(() => {
    console.log('Name has updated');
  }, [name]);

  return <div>{name}</div>;
}

Conclusion

This version uses React hooks to manage state and lifecycle methods, and integrates the UI elements from React Native and React Native Elements :

import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import { Button, Card, Input, Avatar } from 'react-native-elements';

const UserProfile = ({ name, initialAge = 25 }) => {
  const [age, setAge] = useState(initialAge);
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');

  // Equivalent to componentDidMount and componentWillUnmount
  useEffect(() => {
    console.log('Component did mount');
    return () => {
      console.log('Component will unmount');
    };
  }, []);

  // Equivalent to componentDidUpdate for name prop
  useEffect(() => {
    console.log('Name has updated:', name);
  }, [name]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Avatar
        rounded
        size="large"
        source={{ uri: './assets/user-avatar.jpg' }} // Fixed path
      />
      <Card>
        <Card.Title>{name}'s Profile</Card.Title>
        <Card.Divider />
        <Input
          placeholder="Username"
          value={username}
          onChangeText={setUsername}
        />
        <Input
          placeholder="Email"
          keyboardType="email-address"
          value={email}
          onChangeText={setEmail}
        />
        <Input
          placeholder="Age"
          value={age.toString()}
          onChangeText={(text) => setAge(Number(text))}
        />
        <Button title="Update Profile" onPress={() => console.log("Profile Updated")} />
      </Card>
    </View>
  );
};

export default UserProfile;