initState in Provider becomes required with an Array of Arguments.

example/index.tsx

@@ -3,16 +3,24 @@ import { createContainer } from "../src/unstated-next"
 import { render } from "react-dom"
 
 function useCounter(initialState = 0) {
-	let [count, setCount] = useState(initialState)
-	let decrement = () => setCount(count - 1)
-	let increment = () => setCount(count + 1)
+	const [count, setCount] = useState(initialState)
+	const decrement = () => setCount(count - 1)
+	const increment = () => setCount(count + 1)
 	return { count, decrement, increment }
 }
 
-let Counter = createContainer(useCounter)
+const Counter = createContainer(useCounter)
+
+function useRequiredCounter(step: number) {
+	const { count } = Counter.useContainer()
+	const computed = count + step
+	return { count, step, computed }
+}
+
+const RequiredCounter = createContainer(useRequiredCounter)
 
 function CounterDisplay() {
-	let counter = Counter.useContainer()
+	const counter = Counter.useContainer()
 	return (
 		<div>
 			<button onClick={counter.decrement}>-</button>
@@ -22,14 +30,26 @@ function CounterDisplay() {
 	)
 }
 
+function RequiredCounterDisplay() {
+	const { count, step, computed } = RequiredCounter.useContainer()
+	return (
+		<div>
+			Computed Value With Step {step}: {count} + {step} = {computed}
+		</div>
+	)
+}
+
 function App() {
 	return (
-		<Counter.Provider>
+		<Counter.Provider initialState={[]}>
 			<CounterDisplay />
-			<Counter.Provider initialState={2}>
+			<Counter.Provider initialState={[2]}>
 				<div>
 					<div>
 						<CounterDisplay />
+						<RequiredCounter.Provider initialState={[2]}>
+							<RequiredCounterDisplay />
+						</RequiredCounter.Provider>
 					</div>
 				</div>
 			</Counter.Provider>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "unstated-next",
-	"version": "1.1.0",
+	"version": "2.0.0",
 	"description": "200 bytes to never think about React state management libraries ever again",
 	"source": "src/unstated-next.tsx",
 	"main": "dist/unstated-next.js",

src/unstated-next.tsx

@@ -2,24 +2,27 @@ import React from "react"
 
 const EMPTY: unique symbol = Symbol()
 
-export interface ContainerProviderProps<State = void> {
-	initialState?: State
-	children: React.ReactNode
-}
+export type ContainerProviderProps<
+	State extends any[]
+> = React.PropsWithChildren<{
+	initialState: State
+}>
+
+export type UseHookFn<Value, State extends any[]> = (...args: State) => Value
 
-export interface Container<Value, State = void> {
+export interface Container<Value, State extends any[]> {
 	Provider: React.ComponentType<ContainerProviderProps<State>>
 	useContainer: () => Value
 }
 
-export function createContainer<Value, State = void>(
-	useHook: (initialState?: State) => Value,
+export function createContainer<Value, State extends any[]>(
+	useHook: UseHookFn<Value, State>,
 ): Container<Value, State> {
 	let Context = React.createContext<Value | typeof EMPTY>(EMPTY)
 
-	function Provider(props: ContainerProviderProps<State>) {
-		let value = useHook(props.initialState)
-		return <Context.Provider value={value}>{props.children}</Context.Provider>
+	function Provider({ initialState, children }: ContainerProviderProps<State>) {
+		const value = useHook(...initialState)
+		return <Context.Provider value={value}>{children}</Context.Provider>
 	}
 
 	function useContainer(): Value {
@@ -33,7 +36,7 @@ export function createContainer<Value, State = void>(
 	return { Provider, useContainer }
 }
 
-export function useContainer<Value, State = void>(
+export function useContainer<Value, State extends any[]>(
 	container: Container<Value, State>,
 ): Value {
 	return container.useContainer()