Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

webdevrob's avatar

useForm Hook & Custom Context [React]

I'm building out a fairly simplistic component structure for several pages. To cut down on several snippets of duplicate code, I attempted to set up a separate context that contains what was intended to be:

  • a shared data state
  • the setData action
  • a function switch for calling the provided get/post/put/etc methods, on a supplied url, using data

When pulling data and setData off the context, and attempting to setData for a specific value, its like the values are completely disconnected; context's data never updates, state updates with setData fails silently, and the function switch to issue the updates fails (no error details provided).

[Example Context]

...
  const {data, setData, post, put} = useForm()

  return (
    <FormContext.Provider value={{
      data,
      setData,		
      issueUpdate: (url, method = "put") => {
        switch (method) {
          case "put":
            put(url, {
              ...data,
            onSuccess: () => {},
            onError: () => {}
            }
          break;
          case "post":
          ......
        }
      }
    }}>
...

[Example Component]

const {data, setData, issueUpdate} = useFormContext()

<input name="Name" onChange={(e) => setData(e.target.name, e.target.value)}/>

<button onClick={() => issueUpdate('/path/to/endpoint')}>Save</button>

When I access the exact same values from the useForm hook inside the component directly - including the switch function - everything works fine.

Is there some reason I should be expecting this behavior? is the useForm usage really expected to just exist in a single component with no external access? Surely I'm missing something.

Bonus: While we're on the topic, also curious if there are non-hook methods for accessing usePage and useForm?

0 likes
0 replies

Please or to participate in this conversation.