Jak wykonać jakąś akcje dopiero, gdy wykona się setState w React?

Chciałbym wykonać pewną operację dopiero wtedy, gdy zostanie zaaktualizowany stan przy użyciu setState. Czy da się coś takiego zrobić?

useEffect(() => {
  // code
}, [state])

codesomecode napisał(a):

useEffect(() => {
  // code
}, [state])

A istnieje jakiś inny sposób?

Może trochę więcej konkretów? Życie mnie nauczyło, że osoby z mniejszym doświadczeniem w React kombinują za dużo :D

Jeśli zależy Ci jedynie na nowej wartośći stanu, a z dziwnych powodów nie chcesz wykorzystać useEffect to zawsze możesz zrobić coś takiego

const [data, setData] = useState(false); // Ustawiamy testowy stan komponentu

// ...
// ...

const updateData = () => {
  const newData = !data; // Zamieniamy wartość z true na false, żeby pokazać na czym to polega
  
  setData(newData); // Przypisujemy nową wartość do stanu
  
  // Cały komponent jeszcze się nie przeładował
  console.log(data); // dlatego faktyczny stan wciąż wskazuje starą wartość false
  
  // ale możemy posługiwać się zmienną "newData" w której jest zaktualizowana wartość
  actionOne(newData); 
  actionTwo(newData);
  actionThree(newData);
}

Tylko zmienianie stanu komponentu w funkcjach actionOne / actionTwo / actionThree może powodować drobne problemy (stara vs nowa wartość)

@sajek587: Wstaw więcej szczegółów. Przykład kodu który masz i co chcesz osiągnąć.

sajek587 napisał(a):

A istnieje jakiś inny sposób?

Specjalnie dla ciebie coś wymyśliłem na kolanie.

export const root = ReactDOM.createRoot(document.getElementById('root'));
export const body = () => { 
  return <React.StrictMode>
            <App />
        </React.StrictMode> 
  };

root.render(
  body()
);

exportujemy sobie consty, żeby móc potem użyć :>

import './App.css';
import React from 'react';
import { root, body } from './index.js'

const store = {'name': "default"};

function App() {
  const name = store.name;

  const setName = (e) => {
    store.name = e.target.value;
    root.render(body());
  }

  return (
    <div className="App">
      <input type="text" onChange={(e) => setName(e)}/>
      <h1>{name}</h1>
    </div>
  );
}

export default App;

Używamy potem gdzieś w naszej funkcji elementu ReactDom, wywołujemy na nim render z obiektem głównym.

Chodź jako class component, można zrobić tak:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.name = 'default';
  }
  
  setName = (e) => {
    this.name = e.target.value;
    this.forceUpdate();
  };

  render() {
    return (
      <div className="App">
        <input type="text" onChange={(e) => this.setName(e)}/>
        <h1>{this.name}</h1>
      </div>
    )
  }
}

Ogólnie jeśli się użyje hooka setState to react wewnątrz przypisuje wartość do zmiennej state i robi rerender componentu.

Ciekawa sprawa ten react.
Będzie pan zadowolony.