Q:

Component not rerendering on state change? 

Whenever setState() is called, the component doesn't seem to rerender.  As you can see by my comments, the state does in fact change and render seems to be called again, but if I don't add that if statement and simply add a paragraph tag that displays the data it will give me an error.  I'm sure I'm missing something simple, but any help is appreciated. 
import React from "react";
import axios from "axios";
import { constants } from "../constants/constants";
const { baseURL, apiKey, userName } = constants;

class User extends React. Component {
  constructor(props) {
  super(props);
  this.state = {
    user: []
  };
}
componentDidMount() {
  let getUserInfo = axios.create({
    baseURL,
    url: `?  
    method=user.getinfo&user=${userName}&api_key=${apiKey}&format=json`
   });
  getUserInfo().then(response => {
  let data = response.data;
  console.log(data.user.playcount); //logs second, displays correct
  this.setState(state => ({
    user: data
  }));
});
}

render() {
  console.log(this.state); //logs first and third, doesn't work on first but does on third
  let toReturn;
  if (this.state.user.length > 0) {
    toReturn = <p>{this.state.user.user.playcount}</p>;
  } else {
    toReturn = <p>didn't work</p>;
  }
  return <div>{toReturn}</div>;
  }
}

export default User;

A:

I think your problem might have something to do with the changing shape of the user value.  You initialise the value to an empty array, but then—after the fetch is done—you assume it's an object (by using user.user). 
Maybe you could simplify the code a bit to look more like the one below? 
/* imports */

class User extends React. Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null // Make it explicit there's no value at the beginning. 
    };
  }

  componentDidMount() {
    let getUserInfo = axios.create(/* ... */);
    getUserInfo().then(response => {
      let data = response.data;
      this.setState({ // No need to for a setter function as you dno't rely on the previous state's value. 
        user: data.user // Assign the user object as the new value. 
      });
    });
  }

  render() {
    let toReturn;
    // Since it's now a `null`, you can use a simple existence check. 
    if (this.state.user) {
      // User is now an object, so you can safely refer to its properties. 
      toReturn = <p>{this.state.user.playcount}</p>;
    } else {
      toReturn = <p>No data yet.</p>;
    }
    return <div>{toReturn}</div>;
  }
}

export default User;

