Hello, from reading reagent docs. I can't quite understand what create-class does I assume it creates a class that extends component? like in react. I haven't read that deep though 😞

hi

i have input field which has css hover property to change the radius, when i hover and change the input i got flashing the input

when i enter new value in the input field i got re-render the input field, what do you think the best way to fix this issue?

@abdullahibra the flickering looks like a CSS problem, which is going to be hard to diagnose without code. i don’t quite know what problem you are having in terms of the re-render. what did you expect?

@lee.justin.m that's the css piece, is this helpful ?

i’d change the transition to just the property you want to animate

but ultimately it is very hard to debug css without the whole program in front of you

If you’re dereferencing an atom in the :td element, rather than just the :input element, the whole thing will be re-rendered and your animation will be called each time the atom changes

Maybe a subcomponent that takes in the atom, but just returns the :input part of the component would work?

it really shouldn’t. react’s reconciliation algorithm shouldn’t cause the dom node to be re-rendered, though the reagent-level component will be

@lee.justin.m that's the code

@jimberlage i didn't get what you mean

Try replacing (get-in @app-state [:specs :table :main 0 :min]) with (reagent/cursor app-state [:specs :table :main 0 :min]) and :value value with :value @value

Right now, when you change something at that path, react thinks it has to re-render everything in that input-control component, including your animated td element

oh right. doing it this way causes the parent to re-render and pass new props to the input element, which will cause a re-render at the dom level

@jimberlage still the same after swap to your code

Dang. Well that theory is busted

@abdullahibra paste the new code just to make sure

Moving the :td out of the input-control component may work too (if it’s combined with the other changes)

the same

let’s just make sure we understand the problem: get rid of the :value and :on-change so that the input is an uncontrolled input (I realize this won’t work for you in the long run, but it’ll let us know if this is really the issue)

@lee.justin.m when i remove :value and :on-change it's working without any problem

wait what’s this {:key (random-uuid)

i’m thinking that everytime the table re-renders it will get a different key, which will force a remount

just get rid of the key (ignore the warning). i suspect that’s the issue

Perfect 🙂

@lee.justin.m @jimberlage thanks guys

what reagent/cursor do?

i still using it rather than get-in

a cursor creates a “pointer” to the larger atom. you should use them because they only cause updates if the portion of the atom they point to updates. so in your case, the input element will only re-render when [:specs :table :main 0 :min] updates if you use a cursor

if you deref the whole atom and then use get-in, your component will re-render if any portion of the atom changes

a couple of points on the :key issue: never use random keys. it will cause your performance to be terrible. if there is no obvious choice (like a data-structure id) you can either use sequential keys (i.e., 1 2 3), or you can just use into to insert the component directly into the parent component’s vector

@lee.justin.m that's great notes to be care about, thank you

guys

can i use this within clojurescript https://felicegattuso.com/projects/datedropper/ ?

@lee.justin.m can you help me in this?

@abdullahibra here’s how I would go about it: https://gist.github.com/jimberlage/2d3f99b2d0c4fb3e4359268ac7fc53b8

@abdullahibra you can use any react component with reagent. be sure to read through https://cljdoc.xyz/d/reagent/reagent/0.8.1/doc/tutorials/interop-with-react

Idk if there’s a great way to load that library other than a script tag

@jimberlage is jquery working with clojurescript ?

If it’s globally loaded you can access it with js/$. There’s also https://github.com/cljsjs/packages/tree/master/jquery_3 , but if you need that specific datedropper component that may or may not work for you. Looks like the datedropper expects jquery to be globally loaded before it can be loaded

But it should totally work the same as any other JS interop, as long as it’s loaded on the page. The harder part will be getting it to play nice with react

@jimberlage i have tried your code above but i got WARNING: Use of undeclared Var for $, how can i define it?

You need to include jquery somehow - the datedropper you linked is a jquery UI plugin.