title: useMemo to set component style
body: <p>I have a function called styling where I check the value of the parameters to return a color for Card component. A friend told me to try using <code>useMemo</code> to only run the function when my parameters change, but I can't find a way to understand this hook. How would I pass the condition which it doesn't need to run the function?</p>
  <pre><code>function styling(votes) {
    let styling = '#696969'
  
    if (votes &gt; 0) {
      styling = '#008000'
    } else if (votes &lt; 0) {
      styling = '#B22222'
    }
  
    return styling
  }
  
  
  function App() {
  
    const [content, setContent] = useState(images)
  
    const upVote = (param) =&gt; {
      setContent(() =&gt; {
        for(let i = 0; i &lt; content.length; i++) {
          if (content[i].id === param){
            content[i].votes = content[i].votes+1
          } 
        }
        return [...content]
      })
    }
  
    const downVote = (param) =&gt; {
      setContent(() =&gt; {
        for(let i = 0; i &lt; content.length; i++) {
          if (content[i].id === param){
            content[i].votes = content[i].votes-1
          } 
        }
        return [...content]
      })
    }
  
    
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;grid&quot;&gt;
          {content.map((picture, index) =&gt; {
            return &lt;Card key={index} picture={picture} upVote={upVote} downVote={downVote} style={styling(picture.votes)}/&gt;
            })
          }
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default App
  </code></pre>