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”

React State vs Props explained – codeburst

  • Let me define a React component a plain javascript function side by side.class DummyComponent extends React.Component { render () { return divHey/div }}const DummyFunction = () = console.log(‘Hey’)We defined a React component named DummyComponent and returned a div containing text Hey similarly, we defined a function named DummyFunction and output…
  • Let’s take a look at State.React Component StateA state in React Component is its own local state, the state cannot be accessed and modified outside the component and can only be used inside the component which is very similar to, you already guessed it a function own local scope.
  • Let’s demonstrate this with an example.class DummyComponent extends React.Component { state = { name: ‘Manoj’ } render() { return divHello {this.state.name}/div; } }const DummyFunction = () = { let name = ‘Manoj’; console.log(`Hey ${name}`)}As you can see a component state can be compared to a function local scope.
  • Let’s take a look how we can use props in react.class DummyComponent extends React.Component { render() { return divHello {this.props.name}/div; } }// when using the componentDummyComponent name=”Manoj” /DummyComponent name=”Ajay” /We used one react component in multiple places here but with a different name.
  • Props, on the other hand,make components reusable by giving components the ability to receive data from the parent component in the form of props.We also get to know that React components are pretty similar to normal JS functions so from the next time keep this thing in mind 😉 .

Before jumping to state vs props we have to compare a React component with a javascript plain function. Let me define a React component & a plain javascript function side by side. We defined a React…
Continue reading “React State vs Props explained – codeburst”

Container Components and Stateless Functional Components in React – Zsolt Nagy

  • Let’s introduce functional components: – – has become a function with a argument, returning the return value of the method of the original implementation.
  • Implications of the structure of stateless functional components: – – In the introduction, I mentioned that stateless functional components come with performance benefits.
  • Typically, container components have the following properties: – – The rule of thumb for choosing the appropriate syntax for React components is the following: – – then it is advised to use stateless functional components.
  • Let’s put theory into practice, and transform all the stateless component in our chat application into functional components.
  • Reviewing the conditions for modeling a component with a function, we can see that there is absolutely nothing preventing us from creating a functional equivalent of the class.

We will now introduce another way to define simple components. You will not only write less code, but you will also benefit from performance optimizations done by React. Let’s introduce functional components:
Continue reading “Container Components and Stateless Functional Components in React – Zsolt Nagy”

React Higher-Order Components in TypeScript made simple

  • These attributes were chosen to illustrate all the aspects of HOCs while keeping the HOC as simple as possible.PropsThere are three types of props we need to consider when creating a HOC: OriginalProps, ExternalProps and InjectedProps.OriginalProps are props of the wrapped component.
  • The state of the HOC is simple, just the count of the clicksOptionsAs stated before, HOC is a function that takes a component and returns a component.While this is true, many HOCs take the form of curried HOC factories (like the mentioned connect from react-redux) that take a configuration object…
  • If you need to interact with props or states from here, the only way to do it is to specify options as functions, that take the props or states as arguments.For ClickCounted the options are simple – a flag indicating whether to console.log on click:Putting it all togetherHaving declared all the…
  • Now that we have the signature, all that’s left is to implement the HOC:First, we define the type alias for the resulting component’s props — the TOriginalProps ExternalProps to simplify its reuse.
  • Props and state are passed to it with whatever was in the OriginalProps along with the clickCount from the HOC state.Using the HOCTo illustrate how to use our HOC, we create a Demo component, that displays a different text depending on the amount of clicks and a custom message.Notice the type…

On a simple React Higher-Order Component, the process of writing them in TypeScript is demonstrated along with advice and rationals behind the type declarations
Continue reading “React Higher-Order Components in TypeScript made simple”

I wish I knew these before diving into React – OpsGenie Engineering

  • By default, setState triggers a re-renderThe default behavior of React is to re-render on every state change, and most of the time it is okay to rely on this.
  • However, re-rendering unnecessarily wastes cycles which is not a good practice.Each component has a method called shouldComponentUpdate and it is called everytime you change state or pass new props from the parent component.
  • We can simply divide lifecycle into three parts:Mounting: an instance of the component is being created and inserted into the DOM.Updating: component is being re-rendered, can be caused by changes of props or state.Unmounting: component is being removed from the DOM.It is very important to understand how these methods work….
  • Compare this.props with nextProps and if there is a significant change, act on it.Two important notes here:React may call componentWillReceiveProps even if the props have not changed, so comparing this.props and nextProps is is invoked before a mounted component receives new props, this means React doesn’t call componentWillReceiveProps with initial…
  • Use React Developer ToolsReact Developer Tools lets you inspect the React component hierarchy, components’ props and state.

At OpsGenie, we had a deep dive into React for our Badges project. I learned many new things & made many mistakes. These are the things that really helped me.
Continue reading “I wish I knew these before diving into React – OpsGenie Engineering”

Common pitfall in initialising state based on props in React JS

Common pitfall in initialising state based on props in React JS  #javascript #tech #hacker

  • Common pitfall in initialising state based on props in React JSRecently I ran into this issue while working on React JS project where I was passing a part of parent component state to child component via props.
  • So the problem was when the parent component re-renders on state change, the child component is not rendered with updated state value.
  • For example —// our child componentclass ChildComponent extends Component { constructor(){ super(props); this.state = { count:this.props.value }; } render(){ return( div pI have {this.state.count} candies!
  • So the state does not update even though child component is re-rendered upon receiving new props form parent component.
  • If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this methodnextProps is the latest props received from the parent component.We will use this life cycle method and update the…

Recently I ran into this issue while working on React JS project where I was passing a part of parent component state to child component via props. Then I was using that prop to set the initial state…
Continue reading “Common pitfall in initialising state based on props in React JS”

Object.keys preserves key order. I’ve never (will never) depend on, but good to know …

  • However, this breaks down in one situation: if you have two sets of children that you need to reorder, there’s no way to put a key on each set without adding a wrapper element.
  • That is, if you have a component such as: – – The children will unmount and remount as you change the prop because there aren’t any keys marked on the two sets of children.
  • To solve this problem, you can use the add-on to give keys to the sets of children.
  • Instead of creating arrays, we write: – – The keys of the passed object (that is, and ) are used as keys for the entire set of children, and the order of the object’s keys is used to determine the order of the rendered children.
  • Note also that we’re relying on the JavaScript engine preserving object enumeration order here, which is not guaranteed by the spec but is implemented by all major browsers and VMs for objects with non-numeric keys.

In most cases, you can use the key prop to specify keys on the elements you’re returning from render. However, this breaks down in one situation: if you have two sets of children that you need to reorder, there’s no way to put a key on each set without adding a wrapper element.
Continue reading “Object.keys preserves key order. I’ve never (will never) depend on, but good to know
…”