Understanding React — Component life-cycle – Bartosz Szczeciński – Medium

Understanding #ReactJS: Component life-cycle

  • DOupdate state via this.setStateperform last minute optimizationcause side-effects (AJAX calls etc.) in case of server-side-rendering onlyDON’Tcause any side effects (AJAX calls etc.) on client function will be called in each update life-cycle caused by changes to props (parent component re-rendering) and will be passed an object map of all the…
  • == this.props.myProps) { // nextProps.myProp has a different value than our current prop // so we can perform some calculations based on the new value }}Due to the fact that with React Fiber (post 16 beta) this function might be called multiple times before the renderfunction is actually called it…
  • == this.props.myProp) { // this.props.myProp has a different value // we can perform any operations that would // need the new value and/or cause side-effects // like AJAX calls with the new value – this.props.myProp }}DOcause side effects (AJAX calls etc.)DON’Tcall this.setState as it will result in a re-renderAn exception…
  • Please take extra care to prevent against updating if the value did not in fact change as it might result in a render errorInfo)A new addition in React 16 — this life-cycle method is special in way that it can react to events happening in the child component, specifically to any uncaught…
  • Please take extra care to prevent against updating if the value did not in fact change as it might result in a render loop.componentWillUnmountUse this function to “clean up” after the component if it takes advantage of timers (setTimeout, setInterval), opens sockets or performs any operations we need to close…

React provides developers with many methods or “hooks” that are called during the life-cycle of an component, which allows us to update the UI and application state. Knowing when to use which of them…
Continue reading “Understanding React — Component life-cycle – Bartosz Szczeciński – Medium”

Understanding React — Component life-cycle – Bartosz Szczeciński – Medium

  • DOupdate state via this.setStateperform last minute optimizationcause side-effects (AJAX calls etc.) in case of server-side-rendering onlyDON’Tcause any side effects (AJAX calls etc.) on client function will be called in each update life-cycle caused by changes to props (parent component re-rendering) and will be passed an object map of all the props passed, no matter if the prop value has changed or not since previous re-render phase.This function is ideal if you have a component whose parts of state are depending on props passed from parent component as calling this.setState here will not cause an extra render call.Please keep in mind that due to the fact that the function is called with all props, even those that did not change it is expected the developers implement a check to determine if the actual value has changed, for { if(nextProps.myProp !
  • == this.props.myProps) { // nextProps.myProp has a different value than our current prop // so we can perform some calculations based on the new value }}Due to the fact that with React Fiber (post 16 beta) this function might be called multiple times before the renderfunction is actually called it is not recommended to use any side-effect causing operations here.DODON’Tcause any side effects (AJAX calls nextState, nextContext)By default, all class based Components will re-render themselves whenever the props they receiver, their state or context changes.
  • == this.props.myProp) { // this.props.myProp has a different value // we can perform any operations that would // need the new value and/or cause side-effects // like AJAX calls with the new value – this.props.myProp }}DOcause side effects (AJAX calls etc.)DON’Tcall this.setState as it will result in a re-renderAn exception to the above rule is updating the state based on some DOM property which can be only computed once a component has re-rendered (e.g. position / dimensions of some DOM nodes).
  • Please take extra care to prevent against updating if the value did not in fact change as it might result in a render errorInfo)A new addition in React 16 — this life-cycle method is special in way that it can react to events happening in the child component, specifically to any uncaught errors happening in any of the child components.With this addition you can make your parent-element handle the error by — for example — setting the error info in state and returning appropriate message in its render, or logging to reporting system, errorInfo) { this.setState({ error: errorString }); { if(this.state.error) return ShowErrorMessage error={this.state.error} / return ( // render normal component output );}When an error happens, the function will be called message of the errorerrorInfo — an object with a single field componentStack which represent the stack trace back to where the error occured, e.g.:in Thrower in div (created by App) in AppcomponentDidMountThis function will be called only once in the whole life-cycle of a given component and it being called signalizes that the component — and all its sub-components — rendered properly.Since this function is guaranteed to be called only once it is a perfect candidate for performing any side-effect causing operations such as AJAX requests.DOcause side effects (AJAX calls etc.)DON’Tcall this.setState as it will result in a re-renderAn exception to the above rule is updating the state based on some DOM property which can be only computed once a component has re-rendered (e.g. position / dimensions of some DOM nodes).
  • Please take extra care to prevent against updating if the value did not in fact change as it might result in a render loop.componentWillUnmountUse this function to “clean up” after the component if it takes advantage of timers (setTimeout, setInterval), opens sockets or performs any operations we need to close / remove when no longer needed.DOremove any timers or listeners created in lifespan of the componentDON’Tcall this.setState, start new listeners or timersComponent cyclesThere are multiple reasons a component might re-render, and in each of them different functions are called allowing the developer to update certain parts of the Component.Component creationThe first cycle is the creation for component, which usually happens the first time a component is encountered in the parsed JSX tree:Component re-rendering due to re-rendering of the parent componentComponent re-rendering due to internal change (e.g. a call to this.setState())Component re-rendering due to call to this.forceUpdateComponent re-rendering due to catching an errorIntroduced in React 16 as “ErrorBoundaries”.

React provides developers with many methods or “hooks” that are called during the life-cycle of an component, which allows us to update the UI and application state. Knowing when to use which of them…
Continue reading “Understanding React — Component life-cycle – Bartosz Szczeciński – Medium”

React Behavioral Wrapper Components – Ian Carlson – Medium

React Behavioral Wrapper Components  #ui #react #javascript #reactjs

  • But because of how flexible React is you can create wrapper components that add behavior to the children being passed through.
  • This is more applicable when using Redux since not all the backend requests are made within the same component, like a session container for example.Here’s a example of creating an opacity animation component that adds the animation to any child component.
  • This is based on the example in the React documentation using the CSS transition group extension to apply fade-in, fade-out animations based on the lifecycle of the child component(s).
  • The former is actual animation time and the latter is how long temporary classes will stay in existence.Here’s an example of how to use the OpacityAnimation:You can also pass an array of children as well, but it’s important to carefully manage the key properties on each child — even for just one child.
  • For example, a tooltip component would display the children as is, but then attach event handlers to display the tooltip on the right conditions.

Another great thing about React is how easy it is to add behavior to components through composition. Typically new people only think of composition in terms of layout. But because of how flexible…
Continue reading “React Behavioral Wrapper Components – Ian Carlson – 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”

React.js Forms: Controlled Components

#ReactJS Forms: Controlled Components

  • ) form so you can see how child components update the parent component’s state, and how the parent then updates the child component via props ( unidirectional data flow ).
  • The array of letters is joined again, and the new string is set to component state.
  • All of the form element components in this post are pure functional components.
  • Regular, or dumb, components receive data from their parent (container) component.
  • The component is very similar to the components covered already.

This tutorial covers controlled form components, and best practices like immutability and unidirectional data flow. There’re plenty of examples to borrow and tweak for use in your own projects.
Continue reading “React.js Forms: Controlled Components”

Build Your First React.js App

Build Your First React.js App course by @tylermcginnis33 #react

  • We will use Webpack to build the application.
  • Building your first React application can be challenging.
  • Building a React.js App: Basic Routing with React Router
  • Building a React.js App: componentWillReceiveProps and React Router
  • When you’ve completed this series you will have built a full-blown web application using React, and should have the tools needed to start building your own applications today.

Read the full article, click here.


@eggheadio: “Build Your First React.js App course by @tylermcginnis33 #react”


Let’s start from scratch and build a full React application!

Building your first React application can be challenging. React itself is fairly simple. It has a small API that can be learned quickly. One of the huge challenges when you are getting started with React is *all of the other pieces* that contribute to creating an application.

In this series, we will go beyond React, and look at the full picture of what goes into a React application. We will use Webpack to build the application. We will use Firebase to persist data. We will dig into react-router for our applications routing.

When you’ve completed this series you will have built a full-blown web application using React, and should have the tools needed to start building your own applications today.


Build Your First React.js App