использовать Memo для установки стиля компонента

Question

У меня есть функция с именем styling, где проверяется значение параметров для возврата цвета для компонента Card, друг сказал мне попробовать использовать useMemo для запуска функции только при изменении моих параметров, но я не могунайти способ понять этот крючок. Как бы передать условие, при котором не нужно запускать функцию?

function styling(votes) {
  let styling = '#696969'

  if (votes > 0) {
    styling = '#008000'
  } else if (votes < 0) {
    styling = '#B22222'
  }

  return styling
}


function App() {

  const [content, setContent] = useState(images)

  const upVote = (param) => {
    setContent(() => {
      for(let i = 0; i < content.length; i++) {
        if (content[i].id === param){
          content[i].votes = content[i].votes+1
        } 
      }
      return [...content]
    })
  }

  const downVote = (param) => {
    setContent(() => {
      for(let i = 0; i < content.length; i++) {
        if (content[i].id === param){
          content[i].votes = content[i].votes-1
        } 
      }
      return [...content]
    })
  }



  return (
    <div className="App">
      <div className="grid">
        {content.map((picture, index) => {
          return <Card key={index} picture={picture} upVote={upVote} downVote={downVote} style={styling(picture.votes)}/>
          })
        }
      </div>
    </div>
  )
}

export default App

Answer 1

style реквизит требует объекта. Чтобы это работало, вам нужно изменить:

<Card
  key={index}
  picture={picture}
  upVote={upVote}
  downVote={downVote}
  style={{
    color: styling(picture.votes)
  }}
/>

Или вернуть объект из вашей функции, а затем использовать напрямую, как вы уже используете.

Answer 2

Вы передаете свойства, которые могут обновлять результаты функции в массиве, например, useMemo(() => { ... }, [propOne, propTwo]), как и многие другие хуки.

В вашем случае вы передадите votes.