965 Matching Annotations
  1. Nov 2019
  2. Oct 2019
    1. MDX is a superset of Markdown. It allows you to write JSX inside markdown. This includes importing and rendering React components!
    1. Styling a Reach component feels similar to styling any native element. There are no themes and you don't have to prescribe to any specific approach to styling. There are some basic styles to make the components usable off-the-shelf, but you can override and add to them with stylesheets, styled components, emotion, glamor, whatever you want.
    1. type Type = 'a' | 'b'; type AShape = { a: 'a' }; type BShape = { b: 'b' }; type Props<T extends Type> = { type: T, shape: T extends 'a' ? AShape : BShape, }; class Test<T extends ID> extends React.Component<Props<T>> { render() { const { type, shape } = this.props; switch (type) { case 'a': return <>{shape.a}</>; // Ideally would narrow `shape` here, instead of `AShape | BShape` default: return <>{shape.b}</>; } } } <T type="a" shape={{ a: 'a' }} /> // No error in ideal case <T type="a" shape={{ b: 'b' }} /> // error in ideal case
    1. However, if more control is needed, you can pass any of these pieces of state as a prop (as indicated above) and that state becomes controlled. As soon as this.props[statePropKey] !== undefined, internally, downshift will determine its state based on your prop's value rather than its own internal state.
    2. refKey: if you're rendering a composite component, that component will need to accept a prop which it forwards to the root DOM element. Commonly, folks call this innerRef. So you'd call: getRootProps({refKey: 'innerRef'}) and your composite component would forward like: <div ref={props.innerRef} />
  3. Sep 2019
    1. The equivalent ways in functional components using Hooks:In a state variable: useState or useReducer. Updates in state variables will cause a re-render of the component.In a ref: Equivalent to instance variables in class components. Mutating the .current property won’t cause a re-render.
    1. You can control the following props by providing values for them. If you don't, react-select will manage them for you. value / onChange - specify the current value of the control menuIsOpen / onMenuOpen / onMenuClose - control whether the menu is open inputValue / onInputChange - control the value of the search input (changing this will update the available options) If you don't provide these props, you can set the initial value of the state they control: defaultValue - set the initial value of the control defaultMenuIsOpen - set the initial open value of the menu defaultInputValue - set the initial value of the search input

      Example of having props for both ways: value or defaultValue, depending on whether you want it to be controlled or not.

    1. That’s because ref is not a prop. Like key, it’s handled differently by React.
    1. types.refinement might be what you're looking for, you could combine that with for example react-final-form. it is not depending on redux anymore. a form component of react-final-form wrapped by an @observer and using an action within onSubmit callback of it to actually persist the state has worked out well for me recently.
    1. # CocoaPods on iOS needs this extra step

      I think I was missing this step, as it isn't included in the warning message from the CLI anywhere.

      error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
        - @react-native-firebase/app (to unlink run: "react-native unlink @react-native-firebase/app")
        - @react-native-firebase/auth (to unlink run: "react-native unlink @react-native-firebase/auth")
        - @react-native-firebase/database (to unlink run: "react-native unlink @react-native-firebase/database")
        - @react-native-firebase/firestore (to unlink run: "react-native unlink @react-native-firebase/firestore")
        - @react-native-firebase/storage (to unlink run: "react-native unlink @react-native-firebase/storage")
        - react-native-camera (to unlink run: "react-native unlink react-native-camera")
        - react-native-fs (to unlink run: "react-native unlink react-native-fs")
        - react-native-image-picker (to unlink run: "react-native unlink react-native-image-picker")
        - rn-fetch-blob (to unlink run: "react-native unlink rn-fetch-blob")
      This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
      Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
      
  4. Aug 2019
    1. logProps

      Outputs old and new props whenever component updates.

    2. That’s because ref is not a prop. Like key, it’s handled differently by React.
    3. Although such encapsulation is desirable for application-level components like FeedStory or Comment, it can be inconvenient for highly reusable “leaf” components like FancyButton or MyTextInput. These components tend to be used throughout the application in a similar manner as a regular DOM button and input, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations.
    1. Since these are simply functions, you can chain them so that multiple callbacks gets attached to a single element. node => { ref1(node); ref2(node); }
    1. export function assignForwardedRefs(forwardedRef, refToAssign) { if (forwardedRef) { if (typeof forwardedRef === 'function') { forwardedRef(refToAssign) } else { forwardedRef.current = refToAssign } } }

      I don't fully understand when you might need this, but it could come in handy.

      I assumed you could forward refs the same whether they are callbacks or Ref objects, but maybe not??

    1. const useFocus = () => { const htmlElRef = useRef(null) const setFocus = () => {htmlElRef.current && htmlElRef.current.focus()} return [ setFocus, htmlElRef ] }

      exampleOf: useRef exampleOf: custom hook

    1. In order to measure the position or size of a DOM node, you can use a callback ref.

      Interesting use of a ref...

    2. Is there something like instance variables? Yes! The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class.

      Not just for references to DOM elements…

    1. However, useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.

      Not just for references to DOM elements...

    2. You might be familiar with refs primarily as a way to access the DOM. If you pass a ref object to React with <div ref={myRef} />, React will set its .current property to the corresponding DOM node whenever that node changes.

      Good explanation, alluding to how myRef is simply/is like a callback that does sets ref.current = el...

    1. With Suspense, you have the ability to suspend component rendering while async data is being loaded. You can pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic.
    1. Let's briefly look at the libraries, use cases, and factors that might help in deciding which is right for you. Here's a high-level decision tree: If you want fast and easy setup and integration, then component-playground may be the ticket! If you want a smaller bundle, SSR, and more flexibility, then react-live is for you! Here are the various factors at play:
  5. Jul 2019
    1. All React components must act like pure functions with respect to their props.

      It never modifies its props.