reactjs - Should I call actions within componentWillReceiveProps? -


my instinct tells me no, i'm having difficultly thinking of better way.

currently, have component displays list of items. depending on provided props, list may change (i.e. filtering change or contextual change)

for example, given new this.props.type, state updated follows:

componentwillreceiveprops(nextprops) {         if (nextprops.type == this.state.filters.type) return          this.setstate({             filters: {                 ...this.state.filters,                 type: nextprops.type,             },             items: itemsstore.getitems().filter(item => item.type == nextprops.type)         }) }

this fine , good, requirements have changed , need add new filter. new filter, must execute api call return list of valid item ids , want display items these ids in same list component. how should go this?

i had thought calling appropriate action componentwillreceiveprops, doesn't seem right. 

componentwillreceiveprops(nextprops) {         if (nextprops.type == this.state.filters.type && nextprops.otherfilter == this.state.filters.otherfilter) return          if (nextprops.otherfilter != this.state.filters.otherfilter) {             itemsactions.getvalididsforotherfilter(nextprops.otherfilter)             // items updated in store change listener, onstorechange below         }          this.setstate({             filters: {                 ...this.state.filters,                 type: nextprops.type,                 otherfilter: nextprops.otherfilter,             },             items: itemsstore.getitems().filter(item => item.type == nextprops.type)         }) },  onstorechange() {      let validids = itemsstore.getvalidids()       this.setstate({          items: itemsstore.getitems().filter(item => item.type == this.state.filters.type && validids.indexof(item.id) > -1)      }) }

let's have @ options:

componentdidmount

if need api call when component mounts, option.

componentwillmount

is executed server side in rendertostring. api call in here can unwanted.

shouldcomponentupdate

should used deciding if component should re-render or not, no side effects api calls.

componentwillupdate

setstate not possible in method anymore. if you're doing api call you're going show loading indicator or @ least resetting current items guess. not right hook.

componentdidupdate

would possible, if you're going reset current items or show loading indicator, render necessary. first render unnecessary. linters complain if use setstate in here reason. trigger infinite loop if you're unconditionally using setstate every time lifecycle method being executed.

componentwillunmount

definitely not right thing.

componentwillreceiveprops

very best option. if want reset items or show loading indicator, using setstate in here won't trigger additional render. avoid generating state based on props. however, there cases necessary (like yours). lifecycle method way ensure state date.

hope helps!


Comments

Post a Comment

Popular posts from this blog

jOOQ update returning clause with Oracle -

according http://www.jooq.org/doc/3.8/manual/sql-building/sql-statements/update-statement/ jooq doesn't support returning clause in update statements databases except firebird , postgres. does know, still correct oracle jooq? according oracle's documentation, oracle db supports returning clase delete, insert, or update statements. incorrect manual you're right - manual wrong , should fixed: https://github.com/jooq/jooq/issues/5470 single row update returning jooq 3.8 added support single row update .. returning statements. internally, uses callablestatement , pl/sql block of form: begin update "my_table" set "my_table"."column" = 'xyz' "my_table"."id" = 1 returning "my_table"."id", "my_table"."column" ?, ?; ? := sql%rowcount; end; the relevant issue is: https://github.com/jooq/jooq/issues/5190 multi row update returning a...
Read more

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

i have entity inherits other. on other hand, i'm using lombok project reduce boilerplate code, put @data annotation. annotation @data inheritance produces next warning: generating equals/hashcode implementation without call superclass, though class not extend java.lang.object. if intentional, add '@equalsandhashcode(callsuper=false)' type. is advisable add annotation @equalsandhashcode (callsuper = true) or @equalsandhashcode (callsuper = false) ? if not added, 1 callsuper=false or callsuper=true ? the default value false . 1 if don't specify , ignore warning. yes, recommended add @equalsandhashcode annotation on @data annotated classes extend else object. cannot tell if need true or false , depends on class hierarchy, , need examined on case-by-case basis. however, project or package, can configure in lombok.config call super methods if not direct subclass of object. lombok.equalsandhashcode.callsuper = call for configuration system ...
Read more

java - BasicPathUsageException: Cannot join to attribute of basic type -

i using java 8 jpa (hibernate 5.2.1). have clause works perfectly, until introduce clause make use foreign key table values too. i getting following error: basicpathusageexception: cannot join attribute of basic type i think problem related fact have join table, , not sure how create join using join table. employee - employee_category - category model (employee.java): @manytomany(cascade = cascadetype.all, fetch=fetchtype.eager) @jointable ( name="employee_category", joincolumns={ @joincolumn(name="emp_id", referencedcolumnname="id") }, inversejoincolumns={ @joincolumn(name="cat_id", referencedcolumnname="id") } ) private set<category> categories; model (category.java): @id private string id; jpa when introduce following code, fails error above (i think problem new piece of code): join<t, category> category = from.join("id"); predicates.add(criteriabuilder.like(category....
Read more