Как синхронно передать переменную в cleanup useEffect?

Question

[Quintis]

Здраствуйте , как сделать так что б при клике на кнопку click фунуция после return показывала ту же самую переменную что и функция перед return ?

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  let [text, setText] = useState("q");

  useEffect(() => {
    console.log(text + " first");
    return () => {
      console.log(text + " second");
    };
  }, [text]);
  return (
    <div className="App">
      <h1>{text}</h1>
      <button onClick={() => setText(text + "q")}>click</button>
    </div>
  );
}

https://codesandbox.io/s/vigorous-shockley-hctlb?f...

Comments

[ned4ded]

у вас сейчас выводится

q first 
q second 
qq first

а вам надо

q first 
qq second 
qq first

?

[Quintis]

ned4ded, да

Answer 1

[Quintis]

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
  let [text, setText] = useState("q");

  let textRef = useRef(text);

  useEffect(() => {
    console.log(text + " first");
    return () => {
      console.log(textRef.current + " second");
    };
  }, [text]);
  return (
    <div className="App">
      <h1>{text}</h1>
      <button
        onClick={() => {
          setText(text + "q");
          textRef.current = textRef.current + "q";
        }}
      >
        click
      </button>
    </div>
  );
}