Need help with react-hooks-in-svelte?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

joshnuss
223 Stars 6 Forks 57 Commits 0 Opened issues

Description

React hook examples ported to Svelte

Services available

!
?

Need anything else?

Contributors list

# 126,904
Elixir
absinth...
Erlang
XML
57 commits

React Hooks in Svelte

React Hook examples ported to Svelte.

useState

In Svelte,

const [varName, set] = useState(initialValue)
becomes
let varName = initialValue
. The setter function is replaced with JavaScript's assignment operator
=
.

React example
Svelte example

Diff of useState

useEffect

In React, there are 3 ways to

useEffect()
.
  1. With
    null
    dependencies:
    useEffect(fn)
    . This runs on every render.
  2. With an empty array as dependencies:
    useEffect(fn, [])
    . This runs during mount, and cleanup function runs on unmount.
  3. 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.

React example
Svelte example

Diff of useEffect

useMemo

React example
Svelte example

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.

Diff of useMemo

useRef

React example
Svelte example

In Svelte,

useRef()
is
bind:this
.

Diff of useRef

useReducer

React example
Svelte example

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.

Diff of useReducer

useCallback

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 }

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

 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
.

useContext

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

 element like in React, instead use the 
setContext()
function.

React example
Svelte example

Root component Diff of useEffect App

Intermediate component Diff of useEffect Toolbar

Grand-child component Diff of useEffect ThemedButton

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.