useInterval( () => { if (typeof window !== "undefined" && window.google) { setGoogle(window.google); setGoogleIsLoading(false); } }, googleIsLoading ? 100 : null );

For use$ since svelte is never going to support actions for components, i designed something that reminds React hooks that will in some ways replace this feature.

I think Svelte has some things to learn from React hooks.

While react hooks were one of the catalysts for v3 we don't agree with with the APIs or the model and won't be emulating it.

Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.

I used them a bit and realized almost immediately they felt like a leaky abstraction.

There's one downside to Reacts reactivity model - the hooks (useState and useEffect) have to always be called in the same order and you can't put them inside an if block.

MobX - for me personally MobX is a far better way to manage state than React Hooks. It doesn't care about the UI layer so it can be used outside the React ecosystem, and it's simple to mutate data.

This library exports a single React Hook, useMethods, which has all the power of useReducer but none of the ceremony that comes with actions and dispatchers.

This is similar to the :focus-visible pseudo class in CSS.

Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.. That's why using async directly in the useEffect function isn't allowed.

Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase). Doing so will lead to confusing bugs and inconsistencies in the UI.

What does useEffect do? By using this Hook, you tell React that your component needs to do something after render

In React class components, the render method itself shouldn’t cause side effects. It would be too early — we typically want to perform our effects after React has updated the DOM.

Custom Hooks are more of a convention than a feature. If a function’s name starts with ”use” and it calls other Hooks, we say it is a custom Hook. The useSomething naming convention is how our linter plugin is able to find bugs in the code using Hooks.

Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects

React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.

Using custom useInput() hook

const useFocus = () => { const htmlElRef = useRef(null) const setFocus = () => {htmlElRef.current && htmlElRef.current.focus()} return [ setFocus, htmlElRef ] }

Suspense