Documents / @faasjs/react / createSplittingContext

Function: createSplittingContext()

createSplittingContext<T>(defaultValue): object

Creates a splitting context with the given default value.

Parameters

defaultValue

The default value of the splitting context.

{ [K in string | number | symbol]: Partial<T[K]> } | keyof T[]

Returns

use()

use: <NewT>() => Readonly<NewT>

The hook to use the splitting context.

Type Parameters

NewT

NewT extends Record<string, any> = T

See

https://faasjs.com/doc/react/functions/createSplittingContext.html#use

Example

function ChildComponent() {
  const { value, setValue } = use()

  return <div>{value}<button onClick={() => setValue(1)}>change value</button></div>
}

Provider()

Provider<NewT>(props): ReactNode

The provider component of the splitting context.

Type Parameters

NewT

NewT extends Record<string, any> = T

An object containing initial values that will be automatically converted into state variables using useSplittingState hook. Each property will create both a state value and its setter following the pattern: value/setValue.

Example

<Provider
 initializeStates={{
   value: 0,
 }}
>
  // Children will have access to: value, setValue
</Provider>

###### memo?

`true` \| `any`[]

Whether to use memoization for the children.

**Default**

false

`true`: memoize the children without dependencies.
`any[]`: memoize the children with specific dependencies.

###### value?

`Partial`\<`NewT`\>

#### Returns

`ReactNode`

#### See

https://faasjs.com/doc/react/functions/createSplittingContext.html#provider

#### Example

```tsx
function App() {
  const [value, setValue] = useState(0)

  return (
    <Provider value={{ value, setValue }}>
      <ReaderComponent />
      <WriterComponent />
    </Provider>
  )
}

Example

const { Provider, use } = createSplittingContext<{
  value: number
  setValue: React.Dispatch<React.SetStateAction<number>>
}>({
  value: 0,
  setValue: null,
})

function ReaderComponent() {
  const { value } = use()

  return <div>{value}</div>
}

function WriterComponent() {
  const { setValue } = use()

  return (
    <button type='button' onClick={() => setValue((p: number) => p + 1)}>
      Change
    </button>
  )
}

function App() {
  const [value, setValue] = useState(0)

  return (
    <Provider value={{ value, setValue }}>
      <ReaderComponent />
      <WriterComponent />
    </Provider>
  )
}