NoamELB

updateHeight(isOpen) {
  this.lastRAF && cancelAnimationFrame(this.lastRAF);
  if (isOpen) {
    this.lastRAF = requestAnimationFrame(() => {
      // read:
      const height =`${this.contentEl.scrollHeight}px`;
      this.lastRAF = requestAnimationFrame(() => {
        // write in a different frame:
        this.containerEl.style.height = height;
        this.lastRAF = null;

NoamELB

class ShouldNotUpdate extends React.PureComponent {
  constructor(props) {
    super(props);
    this.counter = 0;
  }
  
  render() {
    return `I should be rendered only 1 time. actual times rendered: ${++this.counter}`;
  }
}

NoamELB

class ShouldNotUpdate extends React.Component {
  constructor(props) {
    super(props);
    this.counter = 0;
  }
  
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.children !== nextProps.children;    
  }
  

NoamELB

export default class LeashedOne extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.onChangeDebounce = _.debounce(value => this.props.onChange(value), 300);
  }
  onChange(e) {
    this.onChangeDebounce(e.target.value);
  }
  render () {

NoamELB

export default class UnleashedOne extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }
  onChange(e) {
    this.props.onChange(e.target.value);
  }
  render () {
    return (

NoamELB

updateHeight(isOpen) {
  if (isOpen) {
    this.containerEl.style.height = `${this.contentEl.scrollHeight}px`;
  } else {
    this.containerEl.style.height = '0px';
  }
}

NoamELB

@import "../../../../SASS/lib/core";
@import "../../Cards/Card/mixins";

.tabs {
  padding: 0;
  border: $constants-border;
  border-radius: 8px;

  .tabs_header {
    display: flex;