Building Size-Aware React Components – LogRocket

Building Size-Aware #ReactJS Components:  by @b_edelstein #JavaScript

  • When using an HTML5 Canvas that has to be re-drawn whenever its size changesWhen building a layout where the user can adjust the sizes of different panesWhen using elements or 3rd party libraries that require a known size like react-virtualized, fixed-data-table, etc.When rendering elements with absolute positioning that need their position adjusted when the container size changes.When animating an element’s size with CSS with additional logic that depends on this animated sizeSome of these behaviors may be achievable with CSS, or by managing window size with the onResize event, but in the interest of building React components that are maximally reusable, it makes sense to encapsulate this logic into the component itself.
  • This method is called whenever the component’s size or position changes, and can be used to trigger side effects or put the dimensions into state.This solves most of the earlier examples but there’s one issue — a chicken and egg problem.
  • As such, we don’t always know the dimensions in the render function, so it’s not entirely possible for the component to have render logic based on its dimensions.react-sizemeTo solve this problem, we turn to a library called react-sizeme.
  • This library is similar to react-measure but uses a clever solution to solve the aforementioned problem.react-sizeme does an initial, invisible render of the component to measure its size.
  • Usually this feels quite fast, but in practice, I’ve noticed a slight delay in detecting changes which can lead to a component feeling slow.In general, react-measure has less of a performance impact, so it should be used if possible, but in cases where a component’s initial render depends on its size, then react-sizeme is a good option.Resources

When building React apps, it is sometimes advantageous for components to have awareness of their size and position on screen. This is useful both for rendering content initially, but also for…
Continue reading “Building Size-Aware React Components – LogRocket”

React.js Efficient Server Rendering – Hacker Noon

  • React.js Efficient Server RenderingFor about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more simplicity to frontend.But in some cases we need SEO with dynamic JSX content or we need more performance in load time for a frontend pages.
  • And for that cases Facebook developers made React.js in that way so it can be rendered on Server Side too, using Node.js basic functionality.So the flow is almost similar to this oneClient sending request to get some JSX template pageNode.js server getting main file containing JSX codeRendering it to plain HTML codeSending HTML response to clientUsing HTML markup, then client loading also React.js client side code for adding dynamic logic to rendered HTMLThis is helping to display HTML content faster than React will render it, and it is helping to give some content to Search Engine bots or website crawlers.But What If You Don’t Have Node.JS backend?This is the real questing that was standing for me when I’ve started working on large Python Django project.
  • I decided to do React.js as a frontend, but they hat a lot of Python stuff on a backend, I couldn’t rewrite all code just for server side rendering.
  • I think we really don’t need!And I got an idea to build standalone Node.js Server only for React.js JSX template rendering and nothing else, so I can make a proxy request to that server and it will render JSX content for me and will response pure HTML back to Python Django Template.
  • What is that?So using basic principle of proxy requests I just made very simple code for Pythonimport requestsimport jsonPROXY_RENDER_ADDRESS = ‘http://localhost:3000/’def get_html(filename, props): try: props_str = json.dumps(props) r = + filename , data=props_str , headers={‘Content-Type’: ‘application/json’}) if r.status_code == 200: return r.text, props_str except Exception as e: print(e) return False, FalseWhich is basically making POST Request to proxy rendering service and by passing global state as a JSON, getting back the HTML code rendered by Node.js server.So the main advantages that I gotNo need to integrate Node.js in backend side, or use crappy JS engines in Python, which are eating a lot of memoryAbility to keep JSX template cache, which give huge load time improvementsScale backend services without scaling base rendering service, so you can have multiple servers with single cached rendering service and get better performanceHuge flexibility in writing code.

For about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more…
Continue reading “React.js Efficient Server Rendering – Hacker Noon”

Open-sourcing our #Redux library to sync parts of store state with cookies: #javascript #reactjs #webdev #opensource

  • redux-cookies-middleware is a Redux middleware which watches for changes in Redux state & stores them in browser cookie.
  • Use dot-notation to specify the path of the subsets of the store that has to be synced with cookies.
  • Consider a store with the following shape as an example:

    To sync the auth and with cookies, pass the following object to the middleware:

    { session { name name of the cookie in which the value of session will be synced }, { name name of the cookie in which the value of auth.token will be synced } }

    Value of the path object is another object that takes more configuration options:

    An object of common options for the middleware.

  • It basically takes , reads the synced state from cookies and merges it with the initial state of your application.
  • ( , ( , ) { initialState { auth { token , key }, session }; read stored data in cookies and merge it with the initial state initialState (initialState, paths, ( , ) (req, name)); create store with data stored in cookies merged with the initial state ( reducer, initialState, ([ ( paths, { ( , ) (res, name, value) } ) ]) ); .

redux-cookies-middleware is a Redux middleware which syncs a subset of your Redux store state with cookies.
Continue reading “Open-sourcing our #Redux library to sync parts of store state with cookies: #javascript #reactjs #webdev #opensource”

React.js Efficient Server Rendering – Hacker Noon

  • React.js Efficient Server RenderingFor about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more simplicity to frontend.But in some cases we need SEO with dynamic JSX content or we need more performance in load time for a frontend pages.
  • And for that cases Facebook developers made React.js in that way so it can be rendered on Server Side too, using Node.js basic functionality.So the flow is almost similar to this oneClient sending request to get some JSX template pageNode.js server getting main file containing JSX codeRendering it to plain HTML codeSending HTML response to clientUsing HTML markup, then client loading also React.js client side code for adding dynamic logic to rendered HTMLThis is helping to display HTML content faster than React will render it, and it is helping to give some content to Search Engine bots or website crawlers.But What If You Don’t Have Node.JS backend?This is the real questing that was standing for me when I’ve started working on large Python Django project.
  • I decided to do React.js as a frontend, but they hat a lot of Python stuff on a backend, I couldn’t rewrite all code just for server side rendering.
  • I think we really don’t need!And I got an idea to build standalone Node.js Server only for React.js JSX template rendering and nothing else, so I can make a proxy request to that server and it will render JSX content for me and will response pure HTML back to Python Django Template.
  • What is that?So using basic principle of proxy requests I just made very simple code for Pythonimport requestsimport jsonPROXY_RENDER_ADDRESS = ‘http://localhost:3000/’def get_html(filename, props): try: props_str = json.dumps(props) r = + filename , data=props_str , headers={‘Content-Type’: ‘application/json’}) if r.status_code == 200: return r.text, props_str except Exception as e: print(e) return False, FalseWhich is basically making POST Request to proxy rendering service and by passing global state as a JSON, getting back the HTML code rendered by Node.js server.So the main advantages that I gotNo need to integrate Node.js in backend side, or use crappy JS engines in Python, which are eating a lot of memoryAbility to keep JSX template cache, which give huge load time improvementsScale backend services without scaling base rendering service, so you can have multiple servers with single cached rendering service and get better performanceHuge flexibility in writing code.

For about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more…
Continue reading “React.js Efficient Server Rendering – Hacker Noon”

“Using Functions as Children and Render Props in React Components” #reactjs #javascript

“Using Functions as Children and Render Props in React Components”  #reactjs #javascript

  • Here we are using the component, passing in a function, and then returning some content.
  • The component is able to manage all the state without leaking it’s logic into any other component.
  • This type of component is applicable for times when you need to reload the specific data each time.
  • Additionally if there is additional logic like sticky headers, the outer component doesn’t need to know anything about the logic required to do so.
  • With children as functions we are still able to compose our components like any other React component.

React allows for you to specify a function as a child, which children is just a normal prop so it is equivalent to a render callback.
Continue reading ““Using Functions as Children and Render Props in React Components” #reactjs #javascript”

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”

[React Native 016.3] Using GraphCool with React Native

Using @graphcool with @reactnative -  #reactNative #programming

  • The second screen is a screen to create a post, by passing the image URL and the post description.
  • The rest of the ListPage component is just a list showing each Post and its image.
  • Let’s use this mutation and create a new Post:

    Once we run this mutation, we can refresh our app and see this new Post we have created in our app.

  • On the inline code, we will put our code, it does a POST request to our slack, and we will pass the post description and image url.
  • Let’s save, that, open our slack and create a new Post in our App.

A serverless solution for GraphQL that works great with React Native
Continue reading “[React Native 016.3] Using GraphCool with React Native”