Posts

Showing posts with the label Lodash

Array Of Object Deep Comparison With Lodash

Answer : You can make use of differenceWith() with an isEqual() comparator, and invoke isEmpty to check if they are equal or not. var isArrayEqual = function(x, y) { return _(x).differenceWith(y, _.isEqual).isEmpty(); }; var result1 = isArrayEqual( [{a:1, b:2}, {c:3, d:4}], [{b:2, a:1}, {d:4, c:3}] ); var result2 = isArrayEqual( [{a:1, b:2, c: 1}, {c:3, d:4}], [{b:2, a:1}, {d:4, c:3}] ); document.write([ '<div><label>result1: ', result1, '</label></div>', '<div><label>result2: ', result2, '</label></div>', ].join('')); <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js"></script> UPDATE June 22, 2018 This update is in response to the comment below: @ryeballar if any of the array is undefined it returns true. How would you solve this. Thanks in advance buddy As stated in the differenceWith documentation: ...

Can't Perform A React State Update On An Unmounted Component

Answer : Here is a React Hooks specific solution for Error Warning: Can't perform a React state update on an unmounted component. Solution You can declare let isMounted = true inside useEffect , which will be changed in the cleanup callback, as soon as the component is unmounted. Before state updates, you now check this variable conditionally: useEffect(() => { let isMounted = true; // note this flag denote mount status someAsyncOperation().then(data => { if (isMounted) setState(data); }) return () => { isMounted = false }; // use effect cleanup to set flag false, if unmounted }); const Parent = () => { const [mounted, setMounted] = useState(true); return ( <div> Parent: <button onClick={() => setMounted(!mounted)}> {mounted ? "Unmount" : "Mount"} Child </button> {mounted && <Child />} <p> Unmount Child, while it is still ...

Angular 2 - Debouncing A KeyUp Event

Answer : UPDATE: Using RXJS 6 pipe operator: this.subject.pipe( debounceTime(500) ).subscribe(searchTextValue => { this.handleSearch(searchTextValue); }); You could create a rxjs/Subject and call .next() on keyup and subscribe to it with your desired debounceTime. I'm not sure if it is the right way to do it but it works. private subject: Subject<string> = new Subject(); ngOnInit() { this.subject.debounceTime(500).subscribe(searchTextValue => { this.handleSearch(searchTextValue); }); } onKeyUp(searchTextValue: string){ this.subject.next(searchTextValue); } HTML: <input (keyup)="onKeyUp(searchText.value)"> An Update for Rx/JS 6. Using the Pipe Operator. import { debounceTime } from 'rxjs/operators'; this.subject.pipe( debounceTime(500) ).subscribe(searchTextValue => { this.handleSearch(searchTextValue); }); Everything else is the same