React : using nothing but functions?

Question

I am a beginner in developing with React. I learned with the Facebook documentation. I practice with the "Thinking in React" example (go to it). But I tried to change the solution by using nothing but functions. Here is the result :

function ProductCategoryRow({category, key}) {
    return <tr><th colSpan="2">{category}</th></tr>  ;
}

function ProductRow({product, key}) {
    var name = product.stocked ? product.name :
      <span style={{color: 'red'}}>
        {product.name}
      </span>;   
    return (
      <tr>
        <td>{name}</td>
        <td>{product.price}</td>
      </tr>
    );
  }

function ProductTable({products, filterText, inStockOnly}) {
    var rows = [];
    var lastCategory = null;
      products.forEach((product) => {
        if (product.name.indexOf(filterText) === -1 || (!product.stocked && inStockOnly)) {

          return;
        }
       if (product.category !== lastCategory) {
          rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
        }
        rows.push(<ProductRow product={product} key={product.name} />);
        lastCategory = product.category;
        });
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
}

function handleFilterTextInput(event) { filterText = event.target.value; refresh() }

function handleInStockInput(e) { inStockOnly = e.target.checked; refresh()}

function SearchBar({filterText, inStockOnly, onFilterTextInput, onInStockInput}) {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={filterText}
          onChange={onFilterTextInput}
        />
        <p>
          <input
            type="checkbox"
            checked={inStockOnly}
            onChange={onInStockInput}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  }

var filterText = "";

var inStockOnly = false;

function FilterableProductTable({products}) {
    return (
      <div>
        <SearchBar
          filterText={filterText}
          inStockOnly={inStockOnly}
          onFilterTextInput={handleFilterTextInput}
          onInStockInput={handleInStockInput}
        />
        <ProductTable
          products={PRODUCTS}
          filterText={filterText}
          inStockOnly={inStockOnly}
        />
      </div>
    );
  }


var PRODUCTS = [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];

function refresh() {
  ReactDOM.render(
    <FilterableProductTable products={PRODUCTS} />,
    document.getElementById('container')
  );
}

refresh();

It works well but :

could I go on this way ?
is there any method to refresh de document in a better way that re-render from the root of the tree ?

Any other comment would be appreciated

cathalkilleen · Accepted Answer · 2017-07-18 08:48:11Z

2

You are using functional components in your implementation. These are fine to use for 'stateless' components. However, if a component has properties that will change, for example, the text in your search bar, then you will want to use React state to handle these changes. Changes on state and props of a component are the two main ways that React intelligently manages re-rendering/ refreshing.

There is no need to re-implement a refresh() function, since the power of React comes from its ability to automatically handle re-rendering based on changes to the state of our components.

Hopefully this information helps. I would recommend watching the Intro to React video and to get a grasp of what React does and why developers use it

answered Jul 18, 2017 at 8:48

cathalkilleen

3151 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

carella · Accepted Answer · 2017-07-18 14:06:42Z

0

Thanks for the informations. I have played the video "Intro to React". It is useful for me. But when I see the Facebook documentation that says :

ReactDOM.render() controls the contents of the container node you pass 
in. Any existing DOM elements inside are replaced when first called. 
**Later calls use React’s DOM diffing algorithm for efficient 
updates**.

I wonder why I could not go on with my "refresh" method.

Indeed I am reluctant to dive into Class (that are not real classes !) component, state (that seam's very hard to define correctly) and all that constructor, super, props, this, lifecycle ....... carrying all the this.props. and this.state. notations ....

Certainly I will encounter some situations were it's mandatory but I would be very please to delay this as much as possible !!!

answered Jul 18, 2017 at 14:06

carella

815 bronze badges

2 Comments

cathalkilleen Over a year ago

You could go on with this method - but, you are missing out on the performance wins of React! The various concepts in React can be quite intimidating when you start learning - but they are there for a reason! React intelligently manages changes to your Components (via state and props) and updates only the parts that have changed - rather than refreshing the entire application! Your refresh() function is re-rendering the entire application, and this will cause very poor performance once your app gets bigger.

carella Over a year ago

I found this bignerdranch.com/blog/… I am not the only one ! My refresh() will be replace by the renderComponent() method

Collectives™ on Stack Overflow

React : using nothing but functions?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related