title: Why my render method is react called twice
body: <p><a href="https://i.stack.imgur.com/F21Su.png" rel="noreferrer"><img src="https://i.stack.imgur.com/F21Su.png" alt="enter image description here"></a>I am quite new to react and redux. This is a little confusing problem for me. Can someone please explain this why my searchTerm state value printed twice (render method is getting called twice) after every input change. I read react and learnt that on every state change, render is called but in this called render is called twice? Am I getting this wrong? </p>
  
  <h1>App.js</h1>
  
  <pre><code>import React from 'react';
  import Todos from './components/Todos';
  import Header from './components/Header';
  
  class App extends React.Component {
  state = {
      searchTerm : '',
      todos: [{
      id: 1,
      completed: true,
      text: "I am number one"
      }, 
  {
      id: 2,
      completed: false,
      text: "I am number two"
  },
  {
      id: 3,
      completed: false,
      text: "I am number three"
  }]
  }
  
  markComplete = (id) =&gt; {
      this.setState({
      todos: this.state.todos.map(todo =&gt; {
          if (todo.id === id) {
          todo.completed = !todo.completed;
          }
          return todo;
      })
      });
  }
  
  deleteTo = (id) =&gt; {
      this.setState({
      todos: [...this.state.todos.filter(todo =&gt; todo.id!==id)]
      });
  }
  
  search = (evt) =&gt; {
      const value = evt.target.value;
      this.setState({
      searchTerm: value
      });
  }
  
  render() {
      return (
      &lt;div&gt;
          &lt;Header /&gt;
          { console.log(this.state.searchTerm) }
          &lt;input type="text" onChange = {this.search} /&gt;         
          &lt;Todos todos = {this.state.todos} markComplete = {this.markComplete} deleteTo = {this.deleteTo}/&gt;
      &lt;/div&gt;
      );
  }
  }
  
  export default App;
  </code></pre>
  
  <h1>Todos.js</h1>
  
  <pre><code>import React, { Component } from 'react';
  import TodoItem from './TodoItem';
  
  class Todos extends Component {
  
  render() {
      return this.props.todos.map((todo) =&gt; 
      &lt;TodoItem key={todo.id} todo = {todo} markComplete = {this.props.markComplete} deleteTo={this.props.deleteTo}/&gt;)
  }
  }
  
  export default Todos;
  </code></pre>
  
  <h1>TodoItem.js</h1>
  
  <pre><code>import React, { Component } from 'react';
  
  class TodoItem extends Component {
  
  getStyle = () =&gt; {
      return { textDecoration: this.props.todo.completed ? "line-through": "none" };
  };
  
  getButtonStyle = () =&gt; {
      return {
          backgroundColor: 'red',
          border: 'none',
          cursor: 'pointer',
          float: 'right',
          padding: '5px 10px',
          borderRadius: '50%'
      };
  }
  
  render() {
      const {id, text} = this.props.todo;
  
      return ( 
      &lt;div style={this.getStyle()}&gt;
          &lt;p&gt;
          &lt;input type="checkbox" onChange= { () =&gt; this.props.markComplete(id) }/&gt; {' '}
          {text} 
          &lt;button style={this.getButtonStyle()} onClick = { () =&gt; this.props.deleteTo(id)}&gt; x &lt;/button&gt;
          &lt;/p&gt;
      &lt;/div&gt;
      );
  }
  }
  
  export default TodoItem;
  </code></pre>