Objects that are equal (according to their equals()) must return the same hash code. It’s not required for different objects to return different hash codes.

There are some restrictions placed on the behavior of equals() and hashCode(), which are enumerated in the documentation for Object. In particular, the equals() method must exhibit the following properties:

• Symmetry: For two references, a and b, a.equals(b) if and only if b.equals(a)
• Reflexivity: For all non-null references, a.equals(a)
• Transitivity: If a.equals(b) and b.equals(c), then a.equals(c)
• Consistency with hashCode(): Two equal objects must have the same hashCode() value

References:

• https://www.ibm.com/developerworks/library/j-jtp05273/index.html
• https://www.baeldung.com/java-hashcode
• https://www.interviewcake.com/concept/java/hash-map
• https://www.interviewcake.com/concept/python/hashing?

Two-way data-binding is a mechanism that synchronizes data in a bidirectional way. Two-way binding is a pattern that connects a data model to the UI.

Two-way data binding in Angular really just boils down to property binding and event binding.

// code from https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html
<input [value]="username" (input)="username = $event.target.value">

<p>Hello !</p>

We’re binding the value of the username expression to the input’s value property (data goes into the component). We also bind an expression to the element’s input event. This expression assigns the value of $event.target.value to the username model.

References:

• https://www.bennadel.com/blog/3538-on-the-irrational-demonization-of-two-way-data-binding-in-angular.htm
• https://itnext.io/two-way-binding-in-react-a-concise-what-why-and-how-guide-22e76d4551d5
• https://www.wintellect.com/data-binding-pure-javascript/
• https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html
• https://dev.to/phoinixi/two-way-data-binding-in-vanilla-js-poc-4e06

A throttle is a cousin of the debounce, and they both improve the performance of web applications.

A throttle is best used when you want to handle all intermediate states but at a controlled rate.

Throttling enforces a maximum number of times a function can be called over time. As in “execute this function at most once every 100 milliseconds.”

// code from https://css-tricks.com/the-difference-between-throttling-and-debouncing/

$("body").on('scroll', _.throttle(function() {
  // Do expensive things
}, 100));

References:

• https://levelup.gitconnected.com/throttle-in-javascript-improve-your-applications-performance-984a4e020a3f
• https://css-tricks.com/the-difference-between-throttling-and-debouncing/
• https://highrise.digital/blog/how-to-throttle-javascript-functions/

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow.

Flux applications have three major parts: the dispatcher, the stores, and the views (React components).

When a user interacts with a React view, the view propagates an action through a central dispatcher, to the various stores that hold the application’s data and business logic, which updates all of the views that are affected. This works especially well with React’s declarative programming style, which allows the store to send updates without specifying how to transition views between states.

Control is inverted with stores: the stores accept updates and reconcile them as appropriate, rather than depending on something external to update its data in a consistent way. Nothing outside the store has any insight into how it manages the data for its domain, helping to keep a clear separation of concerns.

References:

• https://facebook.github.io/flux/docs/in-depth-overview/

In HTML, form elements such as input, textarea, and select typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().

We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.

With a controlled component, every state mutation will have an associated handler function.

// Code from https://reactjs.org/docs/forms.html

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.

// Code from https://reactjs.org/docs/uncontrolled-components.html

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

References:

• Forms
• Uncontrolled Components