title: Check if element is in view with React
body: <p>Please do not mark as duplicate. It is similar to other questions, but different, because I'm asking <strong><em>where</em></strong> to put the code, not how to write.</p>
  
  <p>I have this code, and want to detect which section is in view:</p>
  
  <pre><code>export default class Home extends React.Component {
      render() {
          return (
              &lt;React.Fragment&gt;
                  &lt;div className="col_first"&gt;
                      &lt;Scrollspy id="menu_section"
                                 items={['section_1', 'section_2', 'section_3', 'section_4', 'section_5']}
                                 currentClassName="is-current" className="c_nav_menu" style={{marginTop: 100}}&gt;
                          &lt;li className="c_nav_menu_item"&gt;&lt;a href="#section_1"&gt;1&lt;/a&gt;&lt;/li&gt;
                          &lt;li className="c_nav_menu_item"&gt;&lt;a href="#section_2"&gt;2&lt;/a&gt;&lt;/li&gt;
                          &lt;li className="c_nav_menu_item"&gt;&lt;a href="#section_3"&gt;3&lt;/a&gt;&lt;/li&gt;
                          &lt;li className="c_nav_menu_item"&gt;&lt;a href="#section_4"&gt;4&lt;/a&gt;&lt;/li&gt;
                          &lt;li className="c_nav_menu_item"&gt;&lt;a href="#section_5"&gt;5&lt;/a&gt;&lt;/li&gt;
                      &lt;/Scrollspy&gt;
  
                      &lt;div&gt;
                          &lt;li className="lines_between_1"&gt;&lt;/li&gt;
                          &lt;li className="lines_between_2"&gt;&lt;/li&gt;
                          &lt;li className="lines_between_3"&gt;&lt;/li&gt;
                          &lt;li className="lines_between_4"&gt;&lt;/li&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;section className="row bg_double"&gt;
                      &lt;div className="col-lg-1"&gt;
                      &lt;/div&gt;
                      &lt;div className="col-lg-11  s_anim"&gt;
                          &lt;div className="full_screen" id="section_1"&gt;
                              &lt;div className="row full_size"&gt;
                                  &lt;div className="col-lg-12 center_in_s1"&gt;
                                      &lt;h1 className="text_s1 gradient_text"&gt;ZdajTo&lt;/h1&gt;
                                      &lt;p&gt;korepetycje on-line&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className="icon_border_round"&gt;
                                  &lt;a href="#section_2"&gt;&lt;img src={"/assets/images/ic_arrow_down_gradient.png"}/&gt;&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div className="full_screen" id="section_2"&gt;
                              &lt;div className="row full_size"&gt;
                                  &lt;div className="col-lg-6 center_in"&gt;
                                      &lt;h1&gt; elo elo 320 &lt;/h1&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-lg-6 center_in"&gt;
                                      &lt;h1&gt;Przykładowy tekst&lt;/h1&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className="icon_border_round"&gt;
                                  &lt;a href="#section_3"&gt;&lt;img src={"/assets/images/ic_arrow_down_gradient.png"}/&gt;&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div className="full_screen" id="section_3"&gt;
                              &lt;div className="row full_size"&gt;
                                  &lt;div className="col-lg-6 center_in"&gt;
                                      &lt;h1&gt; elo elo 320 &lt;/h1&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-lg-6 center_in"&gt;
                                      &lt;h1&gt;Przykładowy tekst&lt;/h1&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className="icon_border_round"&gt;
                                  &lt;a href="#section_4"&gt;&lt;img src={"/assets/images/ic_arrow_down_gradient.png"}/&gt;&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div className="full_screen" id="section_4"&gt;
                              &lt;div className="row full_size"&gt;
                                  &lt;div className="col-lg-6 center_in"&gt;
                                      &lt;h1&gt; elo elo 320 &lt;/h1&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-lg-6 center_in"&gt;
                                      &lt;h1&gt;Przykładowy tekst&lt;/h1&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div className="icon_border_round"&gt;
                                  &lt;a href="#section_5"&gt;&lt;img src={"/assets/images/ic_arrow_down_gradient.png"}/&gt;&lt;/a&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
  
                          &lt;div className="full_screen" id="section_5"&gt;
                              &lt;div className="row full_size"&gt;
                                  &lt;div className="col-lg-6 center_in"&gt;
                                      &lt;h1&gt; elo elo 320 &lt;/h1&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-lg-6 center_in"&gt;
                                      &lt;h1&gt;Przykładowy tekst&lt;/h1&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div className="icon_border_round"&gt;
                                  &lt;a href="#section_1"&gt;&lt;img src={"/assets/images/ic_arrow_up_gradient.png"}/&gt;&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
              &lt;/React.Fragment&gt;
          )
      }
  };
  </code></pre>
  
  <p>I more or less know how to do it.</p>
  
  <p>I found this question: <a href="https://stackoverflow.com/questions/5353934/check-if-element-is-visible-on-screen">Check if element is visible on screen</a></p>
  
  <p>It has a great answer, which points to this fiddle: <a href="http://jsfiddle.net/t2L274ty/1/" rel="noreferrer">http://jsfiddle.net/t2L274ty/1/</a></p>
  
  <p>Code from the answer</p>
  
  <pre><code>window.onscroll = function() {
    wrapper.style.backgroundColor = checkVisible(tester) ? '#4f4' : '#f44';
  };
  
  function checkVisible(elm) {
    var rect = elm.getBoundingClientRect();
    var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
    return !(rect.bottom &lt; 0 || rect.top - viewHeight &gt;= 0);
  }
  </code></pre>
  
  <p>So my question is where should I put this kind of code? In <code>componentDidMount()</code> or maybe <code>render()</code>? What would be the React way of doing things?</p>