useObserver vs @observer with mobx-react 6.3.1

[vladimir-djokic]

I have a head scratcher, so if anyone could enlighten me as to what I'm doing wrong. I'm using:

• mobx 5.15.7
• mobx-react 6.3.1

Consider following code:

import { observable, transaction } from "mobx";
import { observer, useObserver } from "mobx-react";
import * as React from "react";
import "./styles.css";

interface Info {
  id: number;
}

// @observer
// export class Row extends React.Component<Info> {
//   render(): React.ReactNode {
//     console.log(`Row.render(${this.props.id})`);
//     return (
//       <tr>
//         <td>{this.props.id}</td>
//         <td>foo</td>
//       </tr>
//     );
//   }
// }

export const Row: React.FunctionComponent<Info> = (props) => {
  return useObserver(() => {
    console.log(`Row.render(${props.id})`);
    return (
      <tr>
        <td>{props.id}</td>
        <td>foo</td>
      </tr>
    );
  });
};

@observer
export class List extends React.Component {
  render(): React.ReactNode {
    console.log("List.render()");
    return (
      <div>
        <table>
          <tbody>
            {this.rows.map((o) => (
              <Row key={o.id} id={o.id} />
            ))}
          </tbody>
        </table>
        <button onClick={this.handleClick}>Load More...</button>
      </div>
    );
  }

  readonly handleClick = () => {
    transaction(() => {
      for (let i = 0; i < 5; ++i) this.rows.push({ id: this.rows.length });
    });
  };

  @observable rows: Info[] = [];
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <List />
    </div>
  );
}

Running this using either Row implementation does not output the same log:

• When using useObserver clicking "Load more..." results in List and all previous rows being re-rendered + newly-added rows being rendered for the first time.
• When using @observer clicking "Load more..." results in List and only newly-added rows being rendered for the first time.

So, the questions are:

• Is there is something wrong with my code?
• Is there something wrong with my understanding of the situation?
• Is this an actual issue?

[danielkcz]

Please provide a runnable example (with eg. CodeSandbox) so we can see it in action.

[vladimir-djokic]

Here is the runnable example: https://codesandbox.io/s/mobx-rulc3

[danielkcz]

Thanks. This has technically nothing to do with MobX. The observer also applies React.memo which will optimize that rendering while useObserver does not. That means component with the same props+key is not re-rendered. If that's not what you are asking for, please rephrase your question.

Long story short, avoid useObserver, it's been deprecated.

[vladimir-djokic]

Thank you, it all makes sense now.