Thunks in Redux: The Basics – Fullstack Academy – Medium

Thunks in #Redux : The Basics – Fullstack Academy – Medium  #javascript  #reactjs

  • Thunks in Redux: The BasicsWhat Thunks Are, What They Solve, Other OptionsThis article was born as a gist for React Redux beginners, intended to demystify what thunks are and the motivation for using them.Redux was created by Dan Abramov for a talk.
  • It provides a predictable approach to managing state that benefits from immutability, keeps business logic contained, acts as the single source of truth, and has a very small API.The synchronous and pure flow of data through Redux’s components is well-defined with distinct, simple roles.
  • Notice how a thunk (the function returned from thunkedYell(…)) requires an extra invocation before the work is executed:Here the potential work involves a side effect (logging), but thunks can also wrap calculations that might be slow, or even unending.
  • In any case, other code can subsequently decide whether to actually run the thunk:Aside: LazinessLazy languages like Haskell treat function arguments as thunks automatically, allowing for “infinite” computed-on-demand lists and clever compiler optimizations.
  • Thunks in React  ReduxIn React / Redux, thunks enable us to avoid directly causing side effects in our actions, action creators, or components.

For React & Redux beginners, intended to demystify thunks and the motivation for using them.
Continue reading “Thunks in Redux: The Basics – Fullstack Academy – Medium”

What’s New With Server-Side Rendering in React 16 – Hacker Noon

What’s New With Server-Side Rendering in #ReactJS 16:  by @xander76 #JavaScript #NodeJS

  • Naturally, this feature is also supported by React 16’s server-side rendering.So, you can now server-render components that look like this:class MyArrayComponent extends React.Component { render() { return [ div key=”1″first element/div, div key=”2″second element/div ]; }}class MyStringComponent extends React.Component { render() { return “hey there”; }}class MyNumberComponent extends React.Component {…
  • To learn more about this feature, read Dan Abramov’s post on the React blog about the change.React 16 SSR Doesn’t Support Error Boundaries or PortalsThere are two new features in the React 16 client-side renderer that are unfortunately not supported in the server-side renderer: Error Boundaries and Portals.
  • If for any reason there’s a mismatch, React raises a warning in development mode and replaces the entire tree of server-generated markup with HTML that has been generated on the client.In React 16, though, the client-side renderer uses a different algorithm to check that the server-generated markup is correct.
  • And when the client-side renderer in React 16 detects a markup mismatch, it only attempts to change the HTML subtree that doesn’t match, rather than the entire HTML tree.Generally, this change shouldn’t have much effect for end users, except for one fact: React 16 doesn’t fix mismatched SSR-generated HTML attributes…
  • This performance optimization means that you will need to make extra sure that you fix any markup mismatch warnings you see in your app in development mode.React 16 Doesn’t Need To Be Compiled For Best PerformanceIn React 15, if you used SSR straight out of the box, performance was less…

There are lots of exciting new bits (most notably the Fiber rewrite), but personally, I’m most excited about React 16’s many improvements that have been made to server-side rendering. Let’s take a…
Continue reading “What’s New With Server-Side Rendering in React 16 – Hacker Noon”

What’s New With Server-Side Rendering in React 16 – Hacker Noon

What’s New With Server-Side Rendering in #ReactJS 16:  by @xander76 #JavaScript

  • Naturally, this feature is also supported by React 16’s server-side rendering.So, you can now server-render components that look like this:class MyArrayComponent extends React.Component { render() { return [ div key=”1″first element/div, div key=”2″second element/div ]; }}class MyStringComponent extends React.Component { render() { return “hey there”; }}class MyNumberComponent extends React.Component {…
  • To learn more about this feature, read Dan Abramov’s post on the React blog about the change.React 16 SSR Doesn’t Support Error Boundaries or PortalsThere are two new features in the React 16 client-side renderer that are unfortunately not supported in the server-side renderer: Error Boundaries and Portals.
  • If for any reason there’s a mismatch, React raises a warning in development mode and replaces the entire tree of server-generated markup with HTML that has been generated on the client.In React 16, though, the client-side renderer uses a different algorithm to check that the server-generated markup is correct.
  • And when the client-side renderer in React 16 detects a markup mismatch, it only attempts to change the HTML subtree that doesn’t match, rather than the entire HTML tree.Generally, this change shouldn’t have much effect for end users, except for one fact: React 16 doesn’t fix mismatched SSR-generated HTML attributes…
  • This performance optimization means that you will need to make extra sure that you fix any markup mismatch warnings you see in your app in development mode.React 16 Doesn’t Need To Be Compiled For Best PerformanceIn React 15, if you used SSR straight out of the box, performance was less…

There are lots of exciting new bits (most notably the Fiber rewrite), but personally, I’m most excited about React 16’s many improvements that have been made to server-side rendering. Let’s take a…
Continue reading “What’s New With Server-Side Rendering in React 16 – Hacker Noon”

What’s New With Server-Side Rendering in React 16 – Sasha Aickin – Medium

  • Naturally, this feature is also supported by React 16’s server-side rendering.So, you can now server-render components that look like this:class MyArrayComponent extends React.Component { render() { return [ div key=”1″first element/div, div key=”2″second element/div ]; }}class MyStringComponent extends React.Component { render() { return “hey there”; }}class MyNumberComponent extends React.Component {…
  • To learn more about this feature, read Dan Abramov’s post on the React blog about the change.React 16 SSR Doesn’t Support Error Boundaries or PortalsThere are two new features in the React 16 client-side renderer that are unfortunately not supported in the server-side renderer: Error Boundaries and Portals.
  • If for any reason there’s a mismatch, React raises a warning in development mode and replaces the entire tree of server-generated markup with HTML that has been generated on the client.In React 16, though, the client-side renderer uses a different algorithm to check that the server-generated markup is correct.
  • And when the client-side renderer in React 16 detects a markup mismatch, it only attempts to change the HTML subtree that doesn’t match, rather than the entire HTML tree.Generally, this change shouldn’t have much effect for end users, except for one fact: React 16 doesn’t fix mismatched SSR-generated HTML attributes…
  • This performance optimization means that you will need to make extra sure that you fix any markup mismatch warnings you see in your app in development mode.React 16 Doesn’t Need To Be Compiled For Best PerformanceIn React 15, if you used SSR straight out of the box, performance was less…

There are lots of exciting new bits (most notably the Fiber rewrite), but personally, I’m most excited about React 16’s many improvements that have been made to server-side rendering. Let’s take a…
Continue reading “What’s New With Server-Side Rendering in React 16 – Sasha Aickin – Medium”

Building a React Universal Blog App: Implementing Flux — SitePoint

Building a #ReactJS Universal Blog #App: Implementing Flux:  by @tonyspiro #JavaScript

  • /components/App’ – – // Pages – import Blog from Default from Work from NoMatch from default ( – Route path=”/” data={AppStore.data} component={App} – IndexRoute component={Blog}/ – Route path=”about” component={Default}/ – Route path=”contact” component={Default}/ – Route path=”work” component={Work}/ – Route path=”/work/:slug” component={Work}/ – Route path=”/blog/:slug” component={Blog}/ – Route path=”*” component={NoMatch}/ -…
  • /Partials/Loading’ – – export default class App extends Component { – – // Add change listeners to stores – componentDidMount(){ – } – – // Remove change listeners from stores – componentWillUnmount(){ – } – – _onChange(){ – this.setState(AppStore) – } – – getStore(){ – AppDispatcher.dispatch({ – action: ‘get-app-store’ -…
  • data.ready){ – – document.body.className = ” – this.getStore() – – let style = { – marginTop: 120 – } – return ( – div className=”container text-center” style={ style } – Loading / – /div – ) – } – – // Server first – const Routes = { data: data…
  • /Partials/BlogSingle’ – – // Dispatcher – import AppDispatcher from default class Blog extends Component { – – componentWillMount(){ – this.getPageData() – } – – componentDidMount(){ – const data = this.props.data – document.title = config.site.title + ‘ | ‘ + data.page.title – } – – getPageData(){ – AppDispatcher.dispatch({ – action: ‘get-page-data’,…
  • keyBy(articles, ‘slug’) – const article = articles_object[slug] – main_content = lt;BlogSingle article={ article } /gt; – – } – – return ( – div – Header data={ data }/ – div id=”main-content” className=”container” – div className=”row” – div className=”col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1″ – { main_content } – /div – /div…

Tony Spiro continues his React Blog App by introducing Flux.
Continue reading “Building a React Universal Blog App: Implementing Flux — SitePoint”

Porting enterprise React app to create-react-app – Mihir Karandikar – Medium

  • The short term goal was to see how difficult it is to move the legacy code to CRA; the long term goal being bringing all of our applications under CRA’s fold.The reason for choosing CRA over any other boilerplate is that CRA is truly unopinionated which makes it ideal for porting legacy React applications.
  • Removing all relative imports likeimport * as actions from module-like imports import * as actions from ‘actions/MyActions’And finally write a new build process on our build server since CRA recommends using Yarn.That meant, a decision was to be made!We were debating over ejecting the create-react-app setup Vs. using custom react-scripts.
  • But then I realized that ejecting would make it nearly impossible to keep up with the daily updates of CRA, which meant that custom react scripts was the best way to go.
  • Things were looking good.I’m not going to go in the implementation details of migration, but the purpose of my post is to let others know that it is absolutely possible to port your app to CRA no matter how weird your legacy app setup is.With the power of CRA + custom react scripts, we now TRULY have a zero configuration tool in our tool-belt.
  • From now on, to migrate/create the next app, all we need to do is create-react-app my-app –scripts-version xoxo-react-scriptsand we’re off and running!Things to keep in mindTo my disappointment, CRA does not come with react-hot-loader.

So I’ve been writing React apps for a year now. I’ve had the honor of being one of the maintainers of react-boilerplate. If you’re a React developer, you know how it is- You get the mock-ups, you get…
Continue reading “Porting enterprise React app to create-react-app – Mihir Karandikar – Medium”

Optimizing React Performance with Stateless Components — SitePoint

Optimizing React Performance with Stateless Components  #reactjs #javascript

  • First, the Super Basics
    import React, { Component } from ‘react’

    class User extends Component {
    render() {
    const { name, highlighted, userSelected } = this.props
    console.log(‘Hey User is being rendered for’, [name, highlighted])
    return div
    h3
    style={{fontStyle: highlighted ?

  • For example, something like this:
    import React, { Component } from ‘react’

    class Users extends Component {
    constructor(props) {
    super(props)
    this.state = {
    otherData: null,
    users: [{name: ‘John Doe’, highlighted: false}]
    }
    }

    async componentDidMount() {
    try {
    let response = await let data = await response.json()
    this.setState({otherData: data})
    } catch(err) {
    throw err
    }
    }

    toggleUserHighlight(user) {
    this.setState(prevState = {
    users: prevState.users.map(u = {
    if (u.name === user.name) {
    u.highlighted = !

  • import React, { PureComponent } from ‘react’

    class User extends PureComponent {

    render() {
    const { name, highlighted, userSelected } = this.props
    console.log(‘Hey User is being rendered for’, [name, highlighted])
    return div
    h3
    style={{fontStyle: highlighted ?

  • Our first attempt at re-writing it back to a functional component but with recompose.pure looks like this:
    import React from ‘react’
    import { pure } from ‘recompose’

    const User = pure(({ name, highlighted, userSelected }) = {
    console.log(‘Hey User is being rendered for’, [name, highlighted])
    return div
    h3
    style={{fontStyle: highlighted ?

  • ‘italic’ : ‘normal’}}
    onClick={event = {
    userSelected()
    }}{name}/h3
    /div
    })

    export default User

    As you might notice, if you run this, the User component still re-renders even though the props (the name and highlighted keys) don’t change.

Writing inefficient React components can cause them to rerender too often. Peter Bengtsson looks at ways of creating and optimizing stateless components.
Continue reading “Optimizing React Performance with Stateless Components — SitePoint”