{"action":"created","issue":{"url":"https://api.github.com/repos/mobxjs/mobx/issues/811","repository_url":"https://api.github.com/repos/mobxjs/mobx","labels_url":"https://api.github.com/repos/mobxjs/mobx/issues/811/labels{/name}","comments_url":"https://api.github.com/repos/mobxjs/mobx/issues/811/comments","events_url":"https://api.github.com/repos/mobxjs/mobx/issues/811/events","html_url":"https://github.com/mobxjs/mobx/issues/811","id":204703845,"number":811,"title":"Computed over array is not rerendered","user":{"login":"PetrSnobelt","id":1737335,"avatar_url":"https://avatars.githubusercontent.com/u/1737335?v=3","gravatar_id":"","url":"https://api.github.com/users/PetrSnobelt","html_url":"https://github.com/PetrSnobelt","followers_url":"https://api.github.com/users/PetrSnobelt/followers","following_url":"https://api.github.com/users/PetrSnobelt/following{/other_user}","gists_url":"https://api.github.com/users/PetrSnobelt/gists{/gist_id}","starred_url":"https://api.github.com/users/PetrSnobelt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PetrSnobelt/subscriptions","organizations_url":"https://api.github.com/users/PetrSnobelt/orgs","repos_url":"https://api.github.com/users/PetrSnobelt/repos","events_url":"https://api.github.com/users/PetrSnobelt/events{/privacy}","received_events_url":"https://api.github.com/users/PetrSnobelt/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-02-01T21:01:41Z","updated_at":"2017-02-02T11:04:18Z","closed_at":"2017-02-02T11:04:18Z","body":"Hello,\r\nI try some basic test with Mobx, it looks great, but when I try computed property/function over observable array it is not rendered until I call forceupdate.\r\nI expect that I'm doing some basic mistake, but I can't figure it out..\r\n\r\nWhen I use observable array in component it works as expected, but when I use computed property, which filter and sort this array, it don't rerender automatically\r\n\r\nMy question is: \r\n Why when I use computed property it is not rerendered?\r\n\r\nReproducable sample using:\r\n\"mobx\": \"^3.0.2\", \"mobx-react\": \"^4.1.0\", \"next\": \"2.0.0-beta.17\",\r\n\r\n```\r\nimport { action, observable, extendObservable, computed} from 'mobx'\r\nimport {observer, Provider } from 'mobx-react';\r\nimport DevTools from 'mobx-react-devtools';\r\n\r\nexport class Room {\r\n    key = null;\r\n    @observable name = \"\";\r\n    @observable isArchived = false;\r\n\r\n    constructor(key, name) {\r\n        this.key = key;\r\n        this.name = name;\r\n    }\r\n}\r\n\r\nclass CommStore {\r\n    @observable rooms = [];\r\n\r\n    @computed get count() {\r\n        return this.rooms.length;\r\n    }\r\n\r\n    @computed get ActiveRooms() {\r\n        const r = this.rooms\r\n            .filter(x => {\r\n                return !x.isArchived\r\n            })\r\n            .sort((a,b) => b.key - a.key);\r\n        return r;\r\n    }\r\n}\r\n\r\nconst store = new CommStore();\r\n\r\nconst RoomsView = observer(({rooms}) => <div>Count: {rooms.length}\r\n    <ol>\r\n        {rooms.map(r => <RoomView room={r} key={r.key} />)}\r\n    </ol>\r\n</div>)\r\n\r\nconst RoomView = observer(({room}) => <li>{room.name}</li>)\r\n\r\nconst Debugger = observer(({store}) => <div><pre><code>{JSON.stringify(store, null, 2)}</code></pre></div>)\r\n\r\nconst fillData = () => {\r\n    for (var i = 0; i < 10; i++) {\r\n        store.rooms.push(new Room(i,`room ${i}`))\r\n    }\r\n}\r\n\r\nconst addRoom = () =>\r\n    store.rooms.push(new Room(store.rooms.length,`room ${store.rooms.length}`))\r\n\r\n\r\nexport default class App extends React.Component {\r\n  //try computed as recomended in\r\n  @computed get ActiveRoomsInComponent() {\r\n      const r = store.rooms\r\n        .filter(x => {\r\n            return !x.isArchived\r\n        })\r\n        .sort((a,b) => a.name - b.name);\r\n    return r;\r\n  }\r\n\r\n  componentDidMount() {\r\n      fillData();\r\n      //this.forceUpdate()\r\n  }\r\n\r\n  render() {\r\n    const self = this\r\n    return <div>Mobx filter\r\n        <hr />{JSON.stringify(this.props)}\r\n        {false && <Debugger store={store.rooms} />}\r\n        <h2>computed</h2>\r\n        <RoomsView rooms={store.ActiveRooms} />\r\n        <hr />\r\n        <h2>observable</h2>\r\n        <RoomsView rooms={store.rooms} />\r\n        <hr />\r\n\r\n        <h2>In component</h2>\r\n        <RoomsView rooms={this.ActiveRoomsInComponent} />\r\n\r\n        {/*\r\n        <hr />\r\n        <h2>JSON</h2>\r\n        <Debugger store={store} />\r\n        */}\r\n        <div>\r\n            <button onClick={() => self.forceUpdate()}>forceUpdate</button>\r\n            <button onClick={addRoom}>addRoom</button>\r\n        </div>\r\n        <DevTools />\r\n    </div>\r\n  }\r\n}\r\n\r\n```\r\nWhat am I doing wrong, that RoomsView with computed property (store.ActiveRooms) is not automatically refreshed?\r\n\r\nThank you, Petr"},"comment":{"url":"https://api.github.com/repos/mobxjs/mobx/issues/comments/276928606","html_url":"https://github.com/mobxjs/mobx/issues/811#issuecomment-276928606","issue_url":"https://api.github.com/repos/mobxjs/mobx/issues/811","id":276928606,"user":{"login":"PetrSnobelt","id":1737335,"avatar_url":"https://avatars.githubusercontent.com/u/1737335?v=3","gravatar_id":"","url":"https://api.github.com/users/PetrSnobelt","html_url":"https://github.com/PetrSnobelt","followers_url":"https://api.github.com/users/PetrSnobelt/followers","following_url":"https://api.github.com/users/PetrSnobelt/following{/other_user}","gists_url":"https://api.github.com/users/PetrSnobelt/gists{/gist_id}","starred_url":"https://api.github.com/users/PetrSnobelt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PetrSnobelt/subscriptions","organizations_url":"https://api.github.com/users/PetrSnobelt/orgs","repos_url":"https://api.github.com/users/PetrSnobelt/repos","events_url":"https://api.github.com/users/PetrSnobelt/events{/privacy}","received_events_url":"https://api.github.com/users/PetrSnobelt/received_events","type":"User","site_admin":false},"created_at":"2017-02-02T11:04:18Z","updated_at":"2017-02-02T11:04:18Z","body":"Thank you Michel, I know it is some basic mistake :-)\r\n👍 "}}
{"actor":{"display_login":"PetrSnobelt"}}