Tan Li Hauon Stack Overflow • Recommends
On “Understanding Svelte tick() lifecycle”
When you update your (reactive) variables, it does not immediately reflect onto the DOM, the updates are batched together with other changes and updates in the next update cycle.
Much like react, if you do
this.setState({ foo: 123 });
this.state.foo // you don't expect to read 123
// because this.setState is asynchronous!
Let's take a look at 1 example, and see how we do it in react vs svelte
Say you have a growing text input, which as you type, should grow in height, to accommodate more text.
Here's how you'd probably do it in React:
function GrowingTextInput() {
const ref = useRef();
const value, setValue = useState('');
const updateText = (newValue) => {
setValue(newVa…