title: My React component renders before the props data is available using hooks
body: <p>So I'm creating a simple tile matching app.
  I have a tile component that is fed props from a game board component that houses the tiles and that itself is within the app obviously that has the main logic and there state data.</p>
  <p>I need each Tile to have its own logic to know if it should be flipped or not.</p>
  <p>The problem I have encountered is that when I create a state data for which tiles are flipped and/or should stay flipped the tiles are running their component level logic with previous render data.</p>
  <p>This means I match two tiles, these are added to relevant state - selectedTiles and matchedTiles which is passed to the all the tiles. The tiles check if there are two values in selectedTiles and if so to then check matchedTiles to see if that value matches a component level prop.
  however the logic to check matchedTiles, which is triggered by selectedTiles changing, runs before the matchedTiles prop reaches the component.</p>
  <p>I understand that this is because of the snapshot of the state but I'm unsure how to actually solve the problem.</p>
  <p>apologies for any misunderstanding or explaining as this is my first fully self written react app.</p>
  <p>I have linked the repository on git below.</p>
  <p><a href="https://github.com/Samuel-Programmer/React-Tiles" rel="nofollow noreferrer">https://github.com/Samuel-Programmer/React-Tiles</a></p>