React Rails component: manually triggering a re-render

Question

In Rails, I've got a set of Bootstrap tabs on a page with a React component on each one, ie:

<div id="tab-1" class="tab-pane">
  ...
  <%= react_component('PeopleWidget', person_id: @person.id) %>  
  ...
</div>

<div id="tab-2" class="tab-pane">
  ...
  <%= react_component('ContentWidget', content_id: @content.id) %>
  ...
</div>

The components:

Do not talk with each other
Update a RESTful backend

Now:

PeopleWidget can update a person's permissions in the backend
This should change ContentWidget to read-only behavior

My tactical solution is:

On Bootstrap event when tab-2 is shown, I would like to manually trigger ContentWidget render.
This will initiate loading updated details from backend
ContentWidget will have proper updated behavior

This feels like a workaround but I have a timeline :)

I can't figure out how to manually trigger the ContentWidget to re-render. Is this possible?

if the state of the component changes, it will rerender. LIke a call to `setState` for example. Or new property values being provided. I wouldn't expect however a render to trigger data to be loaded. You shouldn't rely on `render` for a trigger. It might be called too often (or not enough). — WiredPrairie, Jun 08 '15 at 14:07

score 3 · Accepted Answer · answered Jun 08 '15 at 16:33

You could employ a tactic from Flux: you could set up an event listener in your component, and when the event happens, re-render using forceUpdate.

In Flux, components listen to stores. In your case, you could listen to the events triggered by Bootstrap tabs.

For example, to handle the event when the tab is shown:

var ContentWidget = React.createClass({
    _handleTabShow: function() {
      this.forceUpdate()
      // any other reload/re-render code here, too
    },

    componentWillMount: function() { 
      // start listening for show event:
      $('#tab-2').on('shown.bs.tab', this._handleTabShow)
    },

    componentWillUnmount: function() {
      // clean up the handler when the component is removed:
      $('#tab-2').off('shown.bs.tab', this._handleTabShow)     
    }

    // The rest of your component code 
    // goes here....
})

score 0 · Answer 2 · answered Jun 07 '15 at 21:08

0

You can use forceUpdate to make the component re-render

answered Jun 07 '15 at 21:08

Phi Nguyen

3,046
14
26

Thanks. Do you have a brief code example in the context of my code? I've seen ``forceUpdate`` in the docs but don't know how to use it in my existing code. – Daniel May Jun 07 '15 at 21:14

React Rails component: manually triggering a re-render

2 Answers2