Clojurians Log v2

can a hook return an atom?

I mean, I know it can, but I tried it and the component to which I pass the contents of the atom doesn't see the updated value of it

have you derefed ?

yes

but that's quite a general question

when should or shouldn't i deref?

I have a let where I merge the dereffed value of the atom and pass it in props

if it return an atom (that is a pointer) you shall (deref atom) every time you need to use

so the root App has a hook that returns the atom, I create an event handler which can swap the state of the atom and I pass this event handler to a child, then the child uses the event handler, updating the atom, but the root App doesn't re-render

I'm a hooks newbie. Have you tried context hook ?

in react, yeah

i mean in javascript 😄

makes sense to use it here I guess, that would definitely work

is passing the atom reference as a property possible/useful ?

passing as a property to what?

We are in the root component, nothing passes props to this component, the atom is received from a hook and this root component passes it to other elements

using a context would just make the root not a root

I tried to use hooks/use-state instead of the atom and got an infinite loop : (

I hate being stupid

@lilactown https://github.com/geraldodev/react-form-hook-test/blob/master/src/todo_mvc/core.cljs it's working. I gave it another attempt. I don't know why It does not pass the data to handleSubmit as shown in documentation. There is a getValues function which I'm using to access it. Another one that I tried was setValue. So the 1st input is using setValue, the second one is uncrontrolled and its value is being recorded by calling (register).

I'm trying to mimic https://react-hook-form.com/api/#handleSubmit with https://github.com/geraldodev/react-form-hook-test/blob/master/src/todo_mvc/core.cljs#L36 . It's not working

@ashnur changing the value of an atom will not trigger a re-render

you need to use use-state and pass the setter function it returns to your child components

if you created an infinite loop, then you are using the setter incorrectly. you might be calling it inside the body of a component. it needs to be called in response to some event

thanks helix. I wanted to create a custom hook, so I wrote a function with defn and used it in an unnamed function that I create in the body of the component when I pass it through props

the infinite loop happens when I call the event handler that uses this passed down function

so it is an infinite loio that is triggered from the event handler

field-configs (merge {:set-value 
                               (fn [asset-type input-type value] 
                                 (prn 'vatit value asset-type input-type)
                                 (prn 'value [(keyword asset-type) (keyword input-type)])
                                (set-app-state (assoc-in app-state [(keyword asset-type) (keyword input-type)] (str value))))
                              :validate identity}
                       app-state)]

this is the let binding, the field-configs is then passed down to children deep

looks fine

it's the most complicated part of the whole thing I wrote

where do you call that function saved in :set-value

I get a couple of console errors when I run that project

react-hook-form.js:690 Uncaught TypeError: $jscomp.makeIterator is not a function
    at Object.exports.useForm (react-hook-form.js:690)
    at todo-mvc.core/App (core.cljs:23)
    at renderWithHooks (react-dom.development.js:14804)
    at beginWork (react-dom.development.js:17483)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:293)
    at beginWork$1 (react-dom.development.js:23204)
    at performUnitOfWork (react-dom.development.js:22155)
    at workLoopSync (react-dom.development.js:22131)
exports.useForm @ react-hook-form.js:679
todo-mvc.core/App @ core.cljs:23
renderWithHooks @ react-dom.development.js:14773
beginWork @ react-dom.development.js:17478
callCallback @ react-dom.development.js:141
invokeGuardedCallbackImpl @ react-dom.development.js:155
invokeGuardedCallback @ react-dom.development.js:91
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22155
workLoopSync @ react-dom.development.js:22073
performSyncWorkOnRoot @ react-dom.development.js:21738
scheduleWork @ react-dom.development.js:21182
updateContainer @ react-dom.development.js:24361
eval @ react-dom.development.js:24767
unbatchedUpdates @ react-dom.development.js:21844
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24767
exports.render @ react-dom.development.js:24824
todo_mvc$core$start @ core.cljs:64
(anonymous) @ (index):15
react-dom.development.js:19528 The above error occurred in the <todo-mvc.core/App> component:
    in todo-mvc.core/App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <https://fb.me/react-error-boundaries> to learn more about error boundaries.
logCapturedError @ react-dom.development.js:19494
logError @ react-dom.development.js:19553
expirationTime.callback @ react-dom.development.js:20673
commitUpdateQueue @ react-dom.development.js:12503
commitLifeCycles @ react-dom.development.js:19851
commitLayoutEffects @ react-dom.development.js:22790
callCallback @ react-dom.development.js:141
invokeGuardedCallbackImpl @ react-dom.development.js:155
invokeGuardedCallback @ react-dom.development.js:91
commitRootImpl @ react-dom.development.js:7017
exports.unstable_runWithPriority @ scheduler.development.js:683
runWithPriority$1 @ react-dom.development.js:10985
commitRoot @ react-dom.development.js:22309
performSyncWorkOnRoot @ react-dom.development.js:23120
scheduleWork @ react-dom.development.js:21182
updateContainer @ react-dom.development.js:24361
eval @ react-dom.development.js:24767
unbatchedUpdates @ react-dom.development.js:21844
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24767
exports.render @ react-dom.development.js:24824
todo_mvc$core$start @ core.cljs:64
(anonymous) @ (index):15
react-dom.development.js:22666 Uncaught TypeError: $jscomp.makeIterator is not a function
    at Object.exports.useForm (react-hook-form.js:690)
    at todo-mvc.core/App (core.cljs:23)
    at renderWithHooks (react-dom.development.js:14804)
    at beginWork (react-dom.development.js:17483)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:293)
    at beginWork$1 (react-dom.development.js:23204)
    at performUnitOfWork (react-dom.development.js:22155)
    at workLoopSync (react-dom.development.js:22131)

I now doubt that it's that part of the code that causes the recursion. I realized that an use-effect hook is also being continously called that does a remote call repeatedly which is a hint to what might be a problem that I haven't considered fully yet

need a bit of time to think this over and clear up my code. I tried to add spec to it, but haven't been able to yet

I added :compiler-options {:output-feature-set :es6} to the :app build in shadow-cljs.edn and that fixed it

gotcha, no worries

after doing that, when typing in a field I was also seeing errors related to $jscomp

I bumped the :output-feature-set to :es8 and now it works how I would expect

I also changed the way you were using handleSubmit to match the docs:

(d/form 
     {:on-submit (handleSubmit fn-submit)}
     ,,,)

@lilactown I've based the project on helix todo-mvc. sorry for the bumps. Thank you very much. You nailed! Do you see hope for integration with validation on cljs land ?

yeah for sure. this seems to be an issue with shadow-cljs or the dependency… ideally the npm dep should be compiled to match whatever the target output set is (the default is :es3 I think)