PUT Requests
PUT Requests
PUT requests are used to update an existing resource on a server, typically replacing the entire resource with the data provided in the request body.
Making a PUT Request with Fetch
javascript
const response = await fetch('https://api.example.com/users/1', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'John Updated', email: 'john@example.com' }),
});
Making a PUT Request with Axios
javascript
const response = await axios.put('https://api.example.com/users/1', {
name: 'John Updated',
email: 'john@example.com',
});
PUT vs PATCH
PUT typically replaces the entire resource, requiring all fields to be sent, while PATCH updates only the specific fields provided, making it more efficient for partial updates.
javascript
// PATCH only updates the email field
axios.patch('/users/1', { email: 'newemail@example.com' });
Updating a Profile Screen Example
javascript
async function updateProfile(userId, updatedData) {
try {
const response = await axios.put(`/users/${userId}`, updatedData);
setUser(response.data);
} catch (error) {
Alert.alert('Error', 'Failed to update profile');
}
}
Optimistic UI Updates
For a smoother user experience, some apps update the local UI immediately upon submitting a PUT request, then revert the change only if the server request ultimately fails.
Conclusion
PUT requests are essential for implementing edit and update functionality in React Native applications, such as updating a user profile or modifying an existing order.
