Skip to content

Instantly share code, notes, and snippets.

View aykutyaman's full-sized avatar

Aykut Yaman aykutyaman

18 followers · 8 following
  • Ankara, Turkey
View GitHub Profile
@aykutyaman
aykutyaman / deep_comparison.js
Created August 23, 2016 09:33
Create deep-equal props that are not shallow-equal
export class SampleComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return !_.isEqual(this.props, nextProps) ||
!_.isEqual(this.state, nextState);
}
render() {
return <div className={this.props.className}>foo</div>;
}
}
@aykutyaman
aykutyaman / new_function.js
Last active August 23, 2016 09:46
each call to Function.bind produces a new function
> console.log.bind(null, 'hi') === console.log.bind(null, 'hi')
false
> function(){console.log(‘hi');} === function(){console.log(‘hi');}
false
// New function each time
render() {
return <MyComponent onClick={() => this.setState(...)} />
}
@aykutyaman
aykutyaman / todo_item.jsx
Created August 23, 2016 09:49
pass the unbound function and the desired args to the child component, and have the child use an instance method
const TodoItem = React.createClass({
deleteItem() {
this.props.deleteItem(this.props.index);
},
});
@aykutyaman
aykutyaman / array_literals.js
Created August 23, 2016 09:54
Array literals comparision
> ['important', 'starred'] === ['important', 'starred']
false
@aykutyaman
aykutyaman / complexFormProps.jsx
Created August 23, 2016 10:00
if complexFormProps and items come from the same store, typing in the ComplexForm might lead to store updates, and each store update leads to re-rendering the entire <ul>.
<div>
<ComplexForm props={this.props.complexFormProps} />
<ul>
<li prop={this.props.items[0]}>item A</li>
...1000 items...
</ul>
</div>
@aykutyaman
aykutyaman / two_components.jsx
Created August 23, 2016 13:27
refactor out <ul> into its own subcomponent that takes in this.props.items, and only update if this.props.items changes
<div>
<CustomList items={this.props.items} />
<ComplexForm props={this.props.complexFormProps} />
</div>
@aykutyaman
aykutyaman / cached_computation.js
Created August 23, 2016 13:30
This goes against the "single source of state" principle, but if computations on a prop are expensive you can cache them on the component. Instead of directly using doExpensiveComputation(this.prop.someProp) in the render method, we can wrap the call that caches the value if the prop is unchanged
getCachedExpensiveComputation() {
if (this._cachedSomeProp !== this.prop.someProp) {
this._cachedSomeProp = this.prop.someProp;
this._cachedComputation = doExpensiveComputation(this.prop.someProp);
}
return this._cachedComputation;
}
@aykutyaman
aykutyaman / call-child-method-from-parent.jsx
Created September 23, 2016 12:18
class Child extends React.Component {
greeting() {
return 'hello world';
}
}
class Parent extends React.Component {
render() {
return (
<TheChild ref='foo' />
)
@aykutyaman
aykutyaman / queue-with-two-stacks.js
Created August 28, 2018 04:16
/**
* Complexity Analysis
* push: O(1)
* pop: Amortized O(1), Worst-case O(n)
* empty: O(1)
* peek: O(1)
*/
function Queue() {
var stack1 = [];
var stack2 = [];
@aykutyaman
aykutyaman / balanced-parens.js
Created August 28, 2018 04:18
const isOpening = (s, m) => m[s];
const isClosing = (s, m) => (
Object.values(m).includes(s)
);
const isValid = (last, s, m) => (
m[last] !== s
);
const balancedParens = s => {
const mapping = {