Fork me on GitHub
#reagent
<
2018-07-24
>
urbanslug04:07:34

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 😞

4
Jakub Holý (HolyJak)12:07:37

Essentially it calls js/createReactClass

pesterhazy13:07:02

It existed in React before the Component class was introduced

abdullahibra13:07:59

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

abdullahibra13:07:19

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?

justinlee15:07:57

@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?

abdullahibra15:07:36

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

justinlee15:07:54

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

justinlee16:07:12

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

jimberlage16:07:55

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

jimberlage16:07:13

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

justinlee16:07:53

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

abdullahibra16:07:34

@jimberlage i didn't get what you mean

jimberlage16:07:10

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

jimberlage16:07:34

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

justinlee16:07:07

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

abdullahibra16:07:18

@jimberlage still the same after swap to your code

jimberlage16:07:31

Dang. Well that theory is busted

justinlee16:07:59

@abdullahibra paste the new code just to make sure

jimberlage16:07:55

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

justinlee16:07:49

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)

abdullahibra16:07:54

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

justinlee16:07:51

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

justinlee16:07:07

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

👏 4
justinlee16:07:49

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

abdullahibra16:07:22

what reagent/cursor do?

abdullahibra16:07:44

i still using it rather than get-in

justinlee16:07:13

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

justinlee16:07:12

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

justinlee16:07:57

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

👍 4
abdullahibra16:07:33

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

abdullahibra18:07:51

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

justinlee19:07:42

@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

jimberlage19:07:42

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

abdullahibra19:07:12

@jimberlage is jquery working with clojurescript ?

jimberlage19:07:17

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

jimberlage19:07:25

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

abdullahibra19:07:16

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

jimberlage20:07:54

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