Tag
react
Published articles tagged react.
Getting started with urql
urql 5 wires React apps to GraphQL through a client, exchanges, and hooks. This chapter shows createClient with cacheExchange and fetchExchange, auth headers, request policies, mutations, document-cache invalidation, and subscription exchanges.
GraphQL clients compared
Browsers and React apps can talk to GraphQL with fetch, thin wrappers, urql, Apollo Client, Relay, or TanStack Query. This comparison covers what each layer adds—caching, codegen, normalized stores—and when to pick one.
Islands and client directives in Astro
Client directives decide whether a framework component stays static HTML or hydrates in the browser, and when. This page covers framework integrations, the five client directives, what props can cross into an island, sharing state between islands, server islands, and client-side navigation with view transitions.
Normalized caching with urql Graphcache
Graphcache stores records and links like a client-side database, enabling mutation updates, optimistic UI, schema-aware keys, and offline replay. This chapter configures @urql/exchange-graphcache for urql 5.
React forwardRef with TypeScript
import {HTMLAttributes, FC, forwardRef} from 'react' interface Props extends HTMLAttributes<HTMLDivElement> { } export const PageCover = forwardRef<HTMLDivElement, Props>((props, ref) => { return (…
Grouping React components in surrounding components
Let's assume you have an array of data:
Use useRef to fix React state update on unmounted component
When React tries to set state on a component that has been unmounted from the DOM you get that error:
React with Recoil state management
Add RecoilRoot to your root component
React and rerendering
A functional component will refresh any time it receives new props, more precisely if its old and new props fail a referential identity check.
QuickStart: React with TypeScript
You need Node >= 10.16 and npm >= 5.6 .
Testing React Components
We are going to have a look at how you can test your React Components and your Redux reducers and actions.
React hooks
React hooks are a new way to enhance your React Functional Components, for example to let them handle state or reference DOM elements. Before hooks were introduced the only way to achieve this was to…