ATProto Browser

Record data

{
  "uri": "at://did:plc:h4qem3f3cz6yvs3r3xvs634g/app.bsky.feed.post/3lo576k4tgs2k",
  "cid": "bafyreifihzovo2qfinhyew4vjjrmm3bbshg4h6khfcovjkat6dz6lgxmta",
  "value": {
    "text": "This came up in a discussion today. For hooks that need element refs, I'm a big fan of exporting the ref from the hook and having the user attach it vs. having them create their own ref, attaching it and giving it to the hook.\n\nIf this isn't a pattern you've seen, now you have!",
    "$type": "app.bsky.feed.post",
    "embed": {
      "$type": "app.bsky.embed.images",
      "images": [
        {
          "alt": "// BAD, expects the user to correctly set up ref themselves, error prone\nfunction useDimensions(ref) {\n  const [dimensions, setDimensions] = useState(null)\n \n  const updateDimensions = () => {\n    if (ref.current) {\n      setDimensions(ref.current.getBoundingClientRect())\n    }\n  }\n  \n  return { dimensions, updateDimensions }\n}\n\n// GOOD, give them the ref to apply to whatever element they need to\nfunction useDimensions() {\n  const ref = useRef()\n  const [dimensions, setDimensions] = useState(null)\n \n  const updateDimensions = () => {\n    if (ref.current) {\n      setDimensions(ref.current.getBoundingClientRect())\n    }\n  }\n  \n  return { ref, dimensions, updateDimensions }\n}",
          "image": {
            "$type": "blob",
            "ref": {
              "$link": "bafkreiahjata6wf35xpjadghnplxnd2svardm7r6t5xzpeuocij56mfcr4"
            },
            "mimeType": "image/jpeg",
            "size": 732230
          },
          "aspectRatio": {
            "width": 1912,
            "height": 1468
          }
        }
      ]
    },
    "langs": [
      "en"
    ],
    "createdAt": "2025-05-01T20:57:43.916Z"
  }
}