Deep dive into observed Components with React.js and FrintJS

  • Higher-order componentThe API of the observe higher-order component (HoC) is quite simple:import React from ‘react’;import { observe } from ‘frint-react’;function MyComponent(props) { return div…/div;}const ObservedComponent = default ObservedComponent;It receives a function (that we called fn above), where you can generate your props that will be ultimately passed to your target…
  • Generating props synchronouslyThe fn function also gives you access to the FrintJS App’s instance:const ObservedComponent = observe(function (app) { // this will be the `props` in MyComponent return {}; })(MyComponent);Since you have access to your app instance, you can also get values from it, including providers:const ObservedComponent = observe(function (app)…
  • Because they have this dynamic nature, the observe HoC gives you access to parent props as an Observable:const ObservedComponent = observe(function (app, props$) { // …})(MyComponent);In addition to your FrintJS App instance (app), there is a second argument props$, which is props passed down to you from the parent Component…
  • But as your application grows, there will be times, when you need to work with multiple Observables and return a single props stream.This is where a helper function called streamProps shipped with frint-react can come handy.If you are an RxJS ninja, you may skip this part =DThe streamProps function will…
  • In that case, you may want to pass some default props to your target component before new values are generated.The streamProps helper function receives an optional first argument, where you can pass your default props:import { streamProps } from ‘frint-react’;const defaultProps = { foo: ‘n/a’, bar: ‘n/a’, baz: ‘n/a’,};const props$…

Our focus in this article will be about using the observe higher-order component, shipped from frint-react package. To make the most out of this, it is advised that you read these previous articles…
Continue reading “Deep dive into observed Components with React.js and FrintJS”

Make React Fast Again [Part 2]: why-did-you-update – Hacker Noon

Make React Fast Again: why-did-you-update

by @b_edelstein 



#ReactJS #JavaScript

  • By default, React components will re-render whenever their parent renders, even if their props didn’t change.For example, if I have a simple component like this:class DumbComponent extends Component { render() { return div {this.props.value} /div; }}With a parent component like this:class Parent extends Component { render() { return div DumbComponent value={3} / /div; }}Whenever the parent component renders, DumbComponent will re-render, despite its props not changing.Generally, if render runs, and there were no changes to the virtual DOM, it is a wasted render cycle since the render method should be pure and not have any side effects.
  • == ‘production’) { const {whyDidYouUpdate} = require(‘why-did-you-update’) whyDidYouUpdate(React)}Note that this tool is great in local development but make sure it’s disabled in production since it will slow down your app.Understanding the outputwhy-did-you-update monitors your app as it runs and logs components that may have changed unnecessarily.
  • It lets you see the props before and after a render cycle it determined may have been unnecessary.Fixing unnecessary rendersOnce you’ve identified components in your app that are re-rendering unnecessarily, there are a few easy fixes.Use PureComponentIn the above example, DumbComponent is a pure function of its props.
  • If shouldComponentUpdate returns true, render will be called, if it returns false, nothing happens.By implementing this method, you can instruct React to avoid re-rendering a given component if its props don’t change.For example, we could implement shouldComponentUpdate in our dumb component from above like this:class DumbComponent extends Component { { if (this.props.value !
  • It also records the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page is a handy tool for detecting potentially unnecessary component re-renders, helping you make your app perform better.Since why-did-you-update only works in development, check out LogRocket, for diagnosing bugs and performance issues in production.For more React performance tips, check out parts 1 and 3 of this series:

React is usually pretty fast, but it’s easy to make small mistakes that lead to performance issues. Slow component mounts, deep component trees, and unnecessary render cycles can quickly add up to an…
Continue reading “Make React Fast Again [Part 2]: why-did-you-update – Hacker Noon”

Understanding State and Props in React – Hacker Noon

Understanding State and Props in React @RuairidhWM  #JavaScript #Reactjs #WebDev

  • Understanding State and Props in ReactI’ve been playing around with React and Redux recently and thought I would start writing articles on concepts which I’ve had to wrap my head around.So unless you’ve been living in a cave for the past few years, you’ll know that React is an awesome front-end library developed by the good folks at Facebook to make life easier for developers.It’s different to Angular or other frameworks as it is purely front-end (though see the comments below for a great clarification on this).
  • With that said, it’s extremely powerful.One of the concepts I struggled to understand during my learning more about React was the interaction between State and Props.
  • If you’re at all familiar with React then you should know that props flow downwards from the parent component.There is also the case that you can have default props so that props are set even if a parent component doesn’t pass props down.This is why people refer to React as having uni-directional data flow.
  • What happens when a component receives data from someone other than the parent?
  • This is super cool because that means React takes care of the hard work and is blazingly fast.As a little example of state, here is a snippet from a search bar (worth checking out this course if you want to learn more about React)Class SearchBar extends Component { constructor(props) { super(props);this.state = { term: ” }; }render() { return ( div className=”search-bar” input value={this.state.term} onChange={event = / /div ); }onInputChange(term) { this.setState({term}); }}SUMMARYProps and State do similar things but are used in different ways.

I’ve been playing around with React and Redux recently and thought I would start writing articles on concepts which I’ve had to wrap my head around. So unless you’ve been living in a cave for the…
Continue reading “Understanding State and Props in React – Hacker Noon”

Understanding State and Props in React – Ruairidh Wynne-McHardy – Medium

Understanding State and Props in React  #javascript #development #react #es6 #reactjs

  • Understanding State and Props in ReactI’ve been playing around with React and Redux recently and thought I would start writing articles on concepts which I’ve had to wrap my head around.So unless you’ve been living in a cave for the past few years, you’ll know that React is an awesome front-end library developed by the good folks at Facebook to make life easier for developers.It’s different to Angular or other frameworks as it is purely front-end.
  • With that said, it’s extremely powerful.One of the concepts I struggled to understand during my learning more about React was the interaction between State and Props.
  • If you’re at all familiar with React then you should know that props flow downwards from the parent component.There is also the case that you can have default props so that props are set even if a parent component doesn’t pass props down.This is why people refer to React as having uni-directional data flow.
  • What happens when a component receives data from someone other than the parent?
  • This is super cool because that means React takes care of the hard work and is blazingly fast.As a little example of state, here is a snippet from a search bar (worth checking out this course if you want to learn more about React)Class SearchBar extends Component { constructor(props) { super(props);this.state = { term: ” }; }render() { return ( div className=”search-bar” input value={this.state.term} onChange={event = / /div ); }onInputChange(term) { this.setState({term}); }}SUMMARYProps and State do similar things but are used in different ways.

I’ve been playing around with React and Redux recently and thought I would start writing articles on concepts which I’ve had to wrap my head around. So unless you’ve been living in a cave for the…
Continue reading “Understanding State and Props in React – Ruairidh Wynne-McHardy – Medium”

Form Controlled Components-React – Steven Meads – Medium

Form Controlled Components-React  #react #javascript #reactjs

  • Form Controlled Components-ReactI recently built a React application where a few components were input forms.
  • I’ve highlighted a few concepts I found most helpful below.Main ConceptsForm elements typically maintain their own state and update it based on user input.In React, mutable state is typically kept in the state property of components, and only updated with setState().
  • A React component that renders a form also controls what happens in that form on subsequent user input.An input form element whose value is controlled by React in this way is called a “controlled component”.
  • It is invoked via the onSubmit listener sitting on the form itself.We can then invoke a handleClick method, passed down from the parent component, pass it this.state.value as an argument, and now the input value from our user can be passed down as a prop to other components that depend on it.Quick SummaryIn short summary, setting up form elements as controlled components modifying or validating user input becomes much easier.
  • It also makes it more straightforward to pass user input up to the parent component where those input values can then be distributed throughout the application as needed.I hope this quick run through of form elements as controlled components was helpful.

I recently built a React application where a few components were input forms. Initially, I was at a loss about how I was going to retrieve the necessary input values needed for updating the parent…
Continue reading “Form Controlled Components-React – Steven Meads – Medium”

redux mapStateToProps optimization – Cvetanov Goce – Medium

redux mapStateToProps optimization  #redux #react #javascript #reactjs

  • mapStateToProps can now return a function instead of an object.Note: in advanced scenarios where you need more control over the rendering performance, mapStateToProps() can also return a function.
  • In this case, that function will be used as mapStateToProps() for a particular component instance.
  • [from the official docs]If redux receives an implementation which returns a function it performs a closure for wrapping the own props of the component and therefore bypasses the invocation of the mapStateToProps every time the component changes it’s props received from the parent component.
  • How this is done can be seen here.We can now rework our implementation of the MyBlogs component in the following way and achieve a minor performance boost.function ownProps) { // a closure for ownProps is created // this factory is not invoked everytime the component // changes it’s props return function mapStateToProps(state) { return { blogs: state.blogs.filter(blog = blog.author === ownProps.user) }; };}export default using the component’s own props inside mapStateToProps, wrap the mapStateToProps function with a mapStateToPropsFactory which will return the function itself instead of the object directly and redux will not invoke your mapStateToPropsFactory for every parent prop changes.Thanks to my mentor Oliver Lazoroski for pointing this out to me and I will share his TL;DR; remark on this:Think of it like this, if redux receives a mapStateToProps which has ownProps as second argument and it returns an object, it switches off every optimization it makes for your connected component.This was my first of many articles on medium and I hope you will find it useful.

Redux is an open source implementation (aren’t they all?) of the flux architecture suggested by Facebook as a compliant standard for working with data in large React applications. Created by Dan…
Continue reading “redux mapStateToProps optimization – Cvetanov Goce – Medium”

Why I like Vue over React – Munawwar – Medium

  • i. trigger state change through props + listen to componentWillReceiveProps(), which can then change the internal state of the child component
  • Vue.js gives an easy way to access child components using “ref” attribute on the component’s custom element.
  • 3. Attaching events to component root element: When it comes to parent component listening to events on a child, I prefer to attach anonymous functions as event handlers to the root element of the child.
  • Vue.js, gives ability to directly attach an event handler by defining a “v-on:eventname.native” attribute on the component’s custom element.
  • [A gotcha is that $refs isn’t available until the component renders.

As a person who have spent time writing his own JS framework, I am nitpicky, when it come to frameworks. When it comes to React, there are several things I don’t like, which Vue.js seems to have…
Continue reading “Why I like Vue over React – Munawwar – Medium”