Camilo J. Kawerín camilokawerin

How to make AJAX requests to update state from props in ReactJS components

AJAX request should be done at the componentDidMount hook when you need to load data inmediatelly after the component is first rendered. When you wish to refresh the data after some props changed, you must use the componentDidUpdate hook.

But you'll have to take hand of another three lifecycle hooks to avoid starting an infinite loop of requests/updates. Assuming you wish to update a posts list based on props.category changes:

state should have two properties, category and currentCategory, set to null on the component's constructor;
getDerivedStateFromProps is needed to update state.category from the new props.category;
shouldComponentUpdate is needed to compare both state.category and state.currentCategory to determine if the component should be updated;
getSnapshotBeforeUpdate is needed to determine if componentDidUpdate should make an AJAX requ

	/*
	* Copy this file to your /support directory and edit index.js to add:
	*
	* import './utils'
	*
	* Usage:
	*
	* cy.logObj(someObjVar)
	*
	*/

	// shapes

	.triangle() {
	content: "";
	display: inline-block;
	border-style: solid;
	border-color: transparent;
	width: 0;
	height: 0;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="TodoMVC Guide 3.0 Start">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	html,
	body {

	// Based on Bootstrap gradient mixin
	// http://getbootstrap.com/css/#less

	// Faux columns technique by Dan Cederholm
	// http://alistapart.com/article/fauxcolumns

	// Fluid Width Equal Height Columns by Chris Coyier
	// http://css-tricks.com/fluid-width-equal-height-columns/

	.two-faux-colums(@col-one-color: #efefef; @col-one-width: 25%; @col-two-color: #fff; @border-color: #ebebeb; @border-width: 1px) {

	<script>
	// test for localStorage support
	if(('localStorage' in window) && window['localStorage'] !== null){

	var f = document.getElementById('mainform');
	// test with PHP if the form was sent (the submit button has the name "sent")
	<?php if(isset($_POST['sent'])){?>

	// get the HTML of the form and cache it in the property "state"
	localStorage.setItem('state',f.innerHTML);