Direct message chat #334
Direct message chat #334
Conversation
| <IconButton | ||
| className='sidekick__tabs-network' | ||
| icon={Icons.Network} | ||
| onClick={this.clickTab.bind(this, Tabs.NETWORK)} |
There was a problem hiding this comment.
If we changed our clickTab method above can we get rid of the bind?
clickTab = (tab: Tabs) =>
onClick={this.clickTab(Tabs.NETWORK)}
There was a problem hiding this comment.
if I remove the .bind and keep onClick={this.clickTab(Tabs.NETWORK)} it will call the method on each render and to solve it I have to do onClick={() => this.clickTab(Tabs.NETWORK)} which it will create an anonymous function on each render which do not want.
There was a problem hiding this comment.
...it will create an anonymous function on each render which do not want.
Just as an FYI, bind is creating an entirely new function on every render too. So, using bind isn't really a solution to the problem you've mentioned.
There was a problem hiding this comment.
you are right, I was wrong about it, it's also written in react documentation.
@dalefukami for learning purposes..., do you have an idea how we can make it better in performance ?
There was a problem hiding this comment.
There are a couple of strategies that I tend towards:
- If the list is fairly short and static (like this case) I'll just write 3 separate functions on the class.
this.clickNetworkTab: () => this.clickTab(Tabs.NETWORK). They can all call the general case and they're super short so it's pretty obvious that they're just shortcut methods for this purpose. - If the list is dynamic then the main strategy is to cache the functions as they're created the first time. I saw this used in zero-web and it's pretty similar to what I've done previously.
- If the child component is a specific thing that is always supposed to render something of a "type" or "id"...then I'll usually make the child component call the onClick with the appropriate value. In this case, it probably doesn't make sense to use this strategy.
| return ( | ||
| <div | ||
| className='direct-message-members__user' | ||
| onClick={this.handleMemberClick.bind(this, directMessage.id)} |
not sure yet, let's make a task for it |
What does this do?
Direct messages
Task: https://wilderworld.atlassian.net/browse/ZOS-69
Demo: https://www.loom.com/share/9ba37998cc324e78a34b20d805b4582d
Why are we making this change?
How do I test this?
Key decisions and Risk Assessment:
Things to consider: