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;
