React - Circles https://jsfiddle.net/dhruvdutt/p2bq1wxy/

App.js

// @define: Number of circles
const NO_OF_CIRCLES = 3;

// @define: All available colors
const ALL_COLORS = ["SlateBlue", "LightSteelBlue", "Crimson", "SeaGreen", "DarkMagenta", "DarkOrange", "DarkCyan", "SlateGray"];

class Hello extends React.Component {
  
  constructor(props) {
    super(props);
    
    // init state
    this.state = {
      allColors: ALL_COLORS,
      colors: []
    };
    
    // bind proper context
    this.getColor = this.getColor.bind(this);
    this.addColor = this.addColor.bind(this);
    this.switchColors = this.switchColors.bind(this);
    this.drawCircles = this.drawCircles.bind(this);
    
    /*
    * Init Methods
    */
    this.applyInitColors();
    this.changeColor();
  }
  
  /*
  * Dequeues and returns a new color to use for allColors
  */
  getColor() {
    let { allColors } = this.state;
    return allColors.shift();
  }
  
  /*
  * Dequeues and returns a new color to use for allColors
  */
  addColor(allColors, color) {
    return allColors.push(color);
  }
  
  /*
  * Apply initial colors to circles
  */
  applyInitColors() {
    
    for (let index = 0; index < NO_OF_CIRCLES; index++) {
      
      let { colors, allColors } = this.state;
      
      [ colors, allColors ] = this.switchColors(allColors, colors, index);
      
      this.setState({ colors, allColors });
      
    }
    
  }
  
  /*
  * Change colors on intervals, set handlers
  */
  changeColor() {
    for (let index = 0; index < NO_OF_CIRCLES; index++) {
      
      let interval = (index + 1) * 1000;
      
      setInterval(() => {
        
        let { colors, allColors } = this.state;
        
        [ colors, allColors ] = this.switchColors(allColors, colors, index);
        
        this.setState({ colors, allColors });
        
      }.bind(this), interval);
    }
  }
  
  /*
  * Switches color for circle at a given index
  * 
  * @param    {Array}   allColors   Queue of all unused colors
  * @param    {Array}   colors      Array of currently used colors
  * @param    {Number}  index       Index of circle on which color needs to be switched
  *
  * @returns  {Array}   Array including new `allColors` queue and `colors` array
  */
  switchColors(allColors, colors, index) {
    
    // Dequeue a color
    let color = this.getColor();
    
    // Check if the color already applied to some other circle
    if (colors.indexOf(color) === -1) {
      // Add color to the colors array
      colors[index] = color;
    }
    
    // Enqueue the color
    allColors.push(color);
    
    // TODO: Not sure why below line throws errors
    // allColors = this.addColor(allColors, color);
    
    return [
      allColors,
      colors
    ];
  }

  /*
  * Render circles
  */
  drawCircles() {
    let circles = [];
    
    for (let index = 0; index < NO_OF_CIRCLES; index++) {
      
      let color = `${this.state.colors[index]}`;
      
      circles.push(
        <div
          key={index}
          style={{
            borderRadius: "50%",
            background: color,
            width: "50px",
            height: "50px",
            margin: "7px",
            boxShadow: `2px 2px 4px ${color}`,
            display: "inline-block"
          }}>
        </div>
      );
    }
    
    return circles;
  }
  
  render() {
    return (
      <div>
        { this.drawCircles() }
      </div>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);