How to properly get a react fresh state before rendering the component?

Question

I'm sorry if the answer is obvious. I probably missed a pattern to do that...

I have this kind of architecture (more complexe, of course) : A component (here a button) have to call a function and to set a state in the same time.

Of course, This example don't work because the state to displayed word isn't defined before the speak() function is called.

What is the best way to do this ?

const Speaker = () => {
  const [word, setWord]=  useState ("nothing")

  const speak = () => {
    console.log(word)
    ...
  }

  const speakDirectly = () => {
    setWord("hello")
    speak() // say "nothing" instead of "hello" 
  }

  const prepareWord = (wordToPrepare) => {
    setWord(wordToPrepare)
  }

  return (
    <>
    <p>Thinking word : {word} </p>
    <button onClick={() =>prepareWord('Goodbye')} >Prepare to say "Goodbye"</button>
    <button onClick={() =>prepareWord('Goodnight')} >Prepare to say "Goodnight"</button>
    ----
    <button onClick={() =>speak()} >Say Hello</button> 
    <button onClick={() =>speakDirectly('hello')} >Say Hello</button> 
    </>
  )

}

Does exists a pattern to resolve this behaviour in React?

I want to avoid to update my functions like this

const Speaker = () => {
  const [word, setWord]=  useState ("nothing")

  const speak = (directWord) => {
        let wordToSay = directWord || word
        console.log(word)
        ...
   }
   const speakDirectly = (directWord) => {
        setWord(directWord)
        speak(directWord) 
   }
    ...

Yes, then it is impossible ? I absolutely need to have a separated logic between those components ? — Damien Romito, Nov 19 '20 at 16:57
Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Praveen Kumar Purushothaman, Nov 19 '20 at 16:59

Todd Skelton · Accepted Answer · 2020-11-19T18:52:50.203

You could do something like this. Have a state for your word and your direct word. Use an effect for your direct word to trigger speak whenever it's updated, but call speak on click for your prepared word.

const Speaker = () => {
  const [preparedWord, setPreparedWord]=  useState();
  const [directWord, setDirectWord]=  useState();

  const speak = (word) => {
    console.log(word)
    ...
  }

  useEffect(() => directWord && speak(directWord), [directWord]);

  return (
    <>
    <p>Thinking word : {preparedWord} </p>
    <button onClick={() => setPreparedWord('Goodbye')} >Prepare to say "Goodbye"</button>
    <button onClick={() => setPreparedWord('Goodnight')} >Prepare to say "Goodnight"</button>
    ----
    <button onClick={() => speak(preparedWord)} >Speak</button> 
    <button onClick={() => setDirectWord('hello')} >Say Hello</button> 
    </>
  )

}

Update

After thinking about it for a second, unless you need the direct word to be in your state, you can get rid of that part too and just call speak on it while passing it to the function.

const Speaker = () => {
  const [preparedWord, setPreparedWord]=  useState();

  const speak = (word) => {
    console.log(word)
    ...
  }

  return (
    <>
    <p>Thinking word : {preparedWord} </p>
    <button onClick={() => setPreparedWord('Goodbye')} >Prepare to say "Goodbye"</button>
    <button onClick={() => setPreparedWord('Goodnight')} >Prepare to say "Goodnight"</button>
    ----
    <button onClick={() => speak(preparedWord)} >Speak</button> 
    <button onClick={() => speak('hello')} >Say Hello</button> 
    </>
  )

}

How to properly get a react fresh state before rendering the component?

1 Answers1