React Hook examples ported to Svelte.
New 📣: React ⇆ Svelte Cheatsheet
In Svelte, const [varName, set] = useState(initialValue) becomes let varName = initialValue. The setter function is replaced with JavaScript's assignment operator =.
In React, there are 3 ways to useEffect().
- With
nulldependencies:useEffect(fn). This runs on every render. - With an empty array as dependencies:
useEffect(fn, []). This runs during mount, and cleanup function runs on unmount. - With a list of dependency vars:
useEffect(fn, [a, b, c]). This reavaulates whenever a dependency changes. The cleanup runs whenever dependencies change and during unmount.
This is an example of #2, where the callback runs when component is mounted and cleanup runs when unmounted.
In Svelte, all reactive statements are memoized. Instead of const var = useMemo(() => expression, dependencies), you can use $: var = expression. Notice that with Svelte, you don't need to declare the dependencies. The compiler infers them for you.
In Svelte, useRef() is bind:this.
In Svelte, useReducer() can be replaced with a writable() store. Instead of dispatching using a switch statement, functions can be defined on the store directly.
In React, useCallback is used to memoize functions. This is needed because event handlers are re-defined on every render.
Take this example:
// This function (component) is executed on every render
function Component() {
// this event handler is redefined on every render
const handleClick = () => alert("hello")
// because `handleClick` is redefined on every render, `ChildComponent` will be re-rendered too. Because its `onClick` prop is considered changed.
return <ChildComponent onClick={handleClick}/>
}So we need to wrap handleClick in a useCallback, to give a hint to the rendering system that the handler wasn't changed.
In Svelte this isn't needed, because event handlers are declared inside <script> tags. They aren't defined in the render path and therefore arent't redefined on every render. They are defined once per component, so they work similar to how event handlers worked with React.Component.
Context in both frameworks are very similar. One difference is that context in Svelte is not reactive by default. To make it reactive, context data should be wrapped in a store.
Another difference is that context in Svelte does not insert anything into the visual component tree. There is no <Context.Provider> element like in React, instead use the setContext() function.
Root component
Intermediate component
Grand-child component
MIT